React 기본 구성 요소 및 스타일 지정 구성 요소를 사용하여 작업 목록을 구성합니다.

45732 단어 reactreactnativejavascripttutorial
안녕하십니까? react native에서 기본 대기사항 목록을 만드는 과정을 안내하고 싶습니다.내가 시작하기 전에, 이것은 우리가 본문에서 세울 부분이다.

본문을 읽기 전에, 당신은 반드시 React와 그 작업 원리에 대해 기본적인 이해를 해야 합니다. 왜냐하면 나는 그 중의 일부 기본 개념을 해석할 줄 모르기 때문입니다

개시하다


먼저 Expo를 사용하여 명령줄에서 새 응용 프로그램을 만들거나 초기화합니다.이 프로그램은 Expo와 템플릿으로 만들어졌으며, 이 템플릿에 우리의 대기 프로그램을 구축할 것입니다.
$ expo init todo-list

$ cd todo-list

$ expo start
위 코드에서 todo list라는 프로그램을 만들고 디렉터리를 만든 todo list 폴더로 변경하고 'expo start' 명령을 사용하여 프로그램을 시작합니다.이제 애플리케이션으로 이동합니다.js 파일과 그곳의 모든 코드를 삭제합니다.걱정하지 마세요. 우리는 자신의 코드를 작성할 것입니다. 이것은 기존 코드보다 훨씬 좋습니다.지금 우리는 이미 우리의 환경을 세웠으니, 우리는 건설을 시작할 수 있다.
준비됐어, 바드?
그럼요.

어셈블리 생성


네 개의 파일을 포함하는 Components라는 폴더를 만듭니다.이 파일들은 서로 다른 목적을 위한 구성 요소입니다.이러한 구성 요소를 AddInput이라고 합니다.js 머리js, 비어 있습니다.js와 TodoList.js.이런 구성 부분들은 우리가 이곳에서 일하는 주요 특징이 될 것이다.
그 외에js 우리는 반드시 이런 물건이 있어야 한다.
//AddInput.js

import React, { useState } from "react";
import {View, TextInput, Text, TouchableOpacity} from 'react-native'


export default function AddInput() {
  const [value, setValue] = useState("");

  const onChangeText = (text) => {
    setValue(text);
  };

  return (
    <View>
      <View>
        <TextInput placeholder="Add Task..." onChangeText= 
         {onChangeText} />
      </View>
      <TouchableOpacity
        onPress={() => {
          alert('button clicked')
        }}
      >
        <Text>Submit</Text>
      </TouchableOpacity>
    </View>
  );
}
이것은 우리가 처리해야 할 사항을 기록하는 기본 폼을 제공하고, 이를 처리해야 할 사항 목록에 추가하는 단추를 제공합니다.우리 이 녀석을 좀 예쁘게 만들어 주자.
스타일 입력.js
스타일드 components라는 라이브러리를 사용하여 구성 요소의 스타일을 설정할 것입니다.우선, 우리는 양식화된 구성 요소를 설치한다
yarn add styled-components
설치 후 AddInput을 가져옵니다.js 파일을 사용할 수 있도록 합니다.
//AddInput.js
 ...
import styled from "styled-components";

 ...

//beneath the AddInput component
//styles
const ComponentContainer = styled.View`
  flex-direction: row;
`;

const InputContainer = styled.View`
  flex-direction: row;
  border-radius: 10px;
`;

const Input = styled.TextInput`
  font-size: 20px;
  background-color: white;
  width: 300px;
  margin-right: 20px;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 10px;
`;

const SubmitButton = styled.TouchableOpacity`
  width: 50px;
  justify-content: center;
  align-items: center;
  background-color: whitesmoke;
  margin-bottom: 20px;
  border-radius: 50px;
`;

 ...
AddInput 구성 요소에서 로컬 구성 요소를 스타일화된 구성 요소의 사용자 정의 의미로 업데이트합니다.이 컴퓨터 구성 요소들은 현재 스타일화된 구성 요소를 통해 접근할 것입니다.이것은 AddInput 구성 요소의 스타일 설정을 위한 것입니다.
 ...

export default function AddInput(}) {
 ...
  return (
    <ComponentContainer>
      <InputContainer>
        <Input placeholder="Add Task..." onChangeText={onChangeText} />
      </InputContainer>
      <SubmitButton
        onPress={() => {
           alert('button clicked')
        }}
      >
        <Text>Submit</Text>
      </SubmitButton>
    </ComponentContainer>
  );
}

//beneath the AddInput component
//styles

 ...
보시다시피, 본 컴퓨터 구성 요소를 사용자 정의 스타일의 구성 요소로 업데이트합니다.이 경우, 이 모듈을 react native에서 가져올 필요가 없습니다. 스타일화된 모듈이 접근할 수 있도록 허용했기 때문입니다.
됐어, 이 정도면 충분해.지금은 js입니다.우리 빨리 빈 것을 모아 봅시다.우리가 계속하기 전에방이 비어 있다.업무 목록이 비어 있을 때 js 파일을 보여 줍니다.이런 구성 요소는 응용을 더욱 매력적으로 보게 한다.
import React from "react";
import styled from "styled-components";

export default function Empty() {
  return (
    <ComponentContainer>
      <EmptyImage
        source={require("add an image here")}
      />
      <EmptyText>Add To-Do.</EmptyText>
    </ComponentContainer>
  );
}

const ComponentContainer = styled.View`
  align-items: center;
  justify-content: center;
  height: 650px;
`;

const EmptyImage = styled.Image`
  width: 350px;
  height: 200px;
`;

const EmptyText = styled.Text`
  color: white;
  font-family: poppins-bold;
  margin-top: 30px;
  font-size: 30px;
`;
내가 생각하는 이 프로그램의 심장 박동을 구축해 봅시다.이것은 응용 프로그램에서 발생할 것이다.js
import React, { useState } from "react";
import { View, StatusBar, FlatList } from "react-native";
import styled from "styled-components";


export default function App() {
 const [data, setData] = useState([]);
 return (
      <ComponentContainer>
        <View>
          <StatusBar barStyle="light-content" 
             backgroundColor="midnightblue" />
        </View>

        <View>
          <FlatList
            data={data}
           renderItem={({ item }) => (
              console.log(item)
            )}
          />

        </View>
      </ComponentContainer>
    );
}

const ComponentContainer = styled.View`
  background-color: midnightblue;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

플랫 리스트


지금, 나는 너희들에게 처리해야 할 사항 목록이 하나의 수조라는 것을 알려주고 싶다.FlatList라는 걸로 설명해 드릴게요.FlatList는 대형 스크롤 가능 목록을 표시하는 데 사용되는 구성 요소입니다.FlatList와 함께 표시되는 목록은 무한할 수 있고 예측할 수 없습니다.FlatList는 데이터와renderItem을 포함한 두 가지 기둥이 있다.데이터는 빈 그룹을 받아들인다. 이 예에서는 데이터라는 그룹입니다. 빈 그룹을 AddInput 구성 요소에 의존해서 빈 그룹의 데이터를 채웁니다.이 그룹은 처리해야 할 사항 목록입니다.다른 한편, 우리는renderItem이 있는데, 이것은 데이터 속성 그룹의 모든 항목을 나타내는 데 사용되는 리셋 함수이다.

목록에 항목 추가


AddInput 구성 요소로 돌아가서 터치able Opacity라는 기본 구성 요소를 봅시다.이 구성 요소에는 onPress라는 도구가 포함되어 있습니다.AddInput에서 저희 코드를 보시면js, onPress 도구를 alert ('hi') 로 설정하는 것을 볼 수 있습니다.버튼을 눌렀을 때 onPress에서 기능을 실행합니다.현재, 실행 중인 함수는 목록에 항목을 추가합니다. (데이터의 수조라고 합니다.)
응용 프로그램 내.js는 모든 항목을 목록에 추가하는 SubmitHandler라는 방법을 만들 것입니다.이것은 onPress로 전달될 함수입니다.
//App.js
  ...

export default function App() {
     ...
  const submitHandler = (value) => {
    setData((prevTodo) => {
      return [
        {
          value: value,
          key: Math.random().toString(),
        },
        ...prevTodo,
      ];
    });

     ...
  };
submitHandler 방법은 setData라는 함수를 가지고 있으며, 이 함수는 그룹에 항목을 추가하여 상태를 업데이트합니다.
AddInput에서 SubmitHandler 메서드를 사용할 수 있습니다.js, 프로그램에 AddInput 구성 요소를 도입해야 합니다.js는 SubmitHandler를 AddInput 구성 요소에 도구로 전달합니다.
//App.js
 ...
import AddInput from "./Components/AddInput";

export default function App() {
   ...

  const submitHandler = (value) => {
    setData((prevTodo) => {
      return [
        {
          value: value,
          key: Math.random().toString(),
        },
        ...prevTodo,
      ];
    });
  };


    return (
      <ComponentContainer>
        <View>
          <StatusBar barStyle="light-content" 
            backgroundColor="midnightblue" />
        </View>

        <View>
          //FlatList
          <View>
            <AddInput submitHandler={submitHandler} />
          </View>
        </View>
      </ComponentContainer>
    );
submitHandler 방법은 AddInput 구성 요소 내부에서 사용할 수 있도록 도구로 AddInput 구성 요소에 전달됩니다.
AddInput으로 돌아갑니다.js, 우리 아이템 전송
  ...
export default function AddInput({ submitHandler }){
   ...
return(
  ...
 <SubmitButton
        onPress={() => {
          setValue(submitHandler(value));
        }}
      >
        ...
      </SubmitButton>
)
}
여기에서, 우리는 폼에 입력한 값을 응용 프로그램의 데이터 도구 처리 그룹에 추가합니다.onPress의 도움말 아래 js는 눌렀을 때SubmitHandler 함수를 호출합니다.

목록이 화면에 표시됩니다.


작업 목록 항목을 화면에 표시해야 하기 때문에 TodoList라는 다른 구성 요소를 만들었습니다.FlatList의renderItems 도구를 기억하십니까? 데이터 도구의 항목을 화면에 렌더링하는 데 도움이 됩니까?TodoList 구성 요소를 화면에 표시합니다. (이 구성 요소는 우리의 그룹 항목을 저장합니다.)
응용 프로그램으로 돌아갑니다.js
  ...
import TodoList from "./Components/TodoList";
  ...

<FlatList
            data={data}
            renderItem={({ item }) => (
              <TodoList item={item} />
            )}
          />
이제 토도리스트로 넘어가자.js, 우리는 우리의 구성 요소를 구축합니다.
//TodoList.js
import React from "react";
import { View } from "react-native";
import styled from "styled-components";

export default function TodoList({ item }) {
  return (
    <ComponentContainer>
      <ListContainer>
        <View>
          <TextItem>{item.value}</TextItem>
          <TextTask> Task</TextTask>
        </View>
      </ListContainer>
    </ComponentContainer>
  );
}

const ListContainer = styled.TouchableOpacity`
  background-color: whitesmoke;
  height: auto;
  width: 350px;
  margin-bottom: 30px;
  border-radius: 10px;
  flex-direction: row;
  justify-content: space-between;
`;

const ComponentContainer = styled.View`
  flex-direction: row;
  justify-content: center;
  height: auto;
  width: auto;
`;

const TextItem = styled.Text`
  color: black;
  width: 260px;
  height: auto;
  font-size: 20px;
  margin-top: 10px;
  margin-right: 20px;
  font-family: poppins-regular;
`;

const TextTask = styled.Text`
  color: goldenrod;
  font-size: 15px;
  margin-right: 20px;
  font-family: poppins-regular;
  border-radius: 10px;
  width: 40px;
`;
이 때, onPress의 함수가 호출되었을 때, 우리의 업무 목록에 있는 모든 항목이 화면에 표시되어야 합니다.
계속하기 전에 프로젝트 목록을 유일하게 만드는 키가 필요합니다.Flat List에서 키 Extractor라는 도구를 사용해서 이를 실현합니다.이 아이템은 목록에 있는 항목마다 키를 분배합니다.
  ...

<FlatList
            data={data}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => (
              <TodoList item={item} />
            )}
          />

목록에서 항목 삭제


업무 목록에서 항목을 삭제하려면 App에서 DeleteItem이라는 메서드를 만듭니다.js를 도구로 TodoList에 가져옵니다.js
//App.js
  ...

export default function App() {
     ...
  const deleteItem = (key) => {
    setData((prevTodo) => {
      return prevTodo.filter((todo) => todo.key != key);
    });
  };
     ...
  };
이제 DeleteItem을 도구로 TodoList 구성 요소에 전달합니다.
//App.js
  ...
import TodoList from "./Components/TodoList";
  ...

<FlatList
            data={data}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => (
              <TodoList item={item} deleteItem={deleteItem} />
            )}
          />
DeleteItem이 TodoList에서 작동하도록 합니다.js, 구성 요소를 업데이트해야 합니다.
import React from "react";
import { View } from "react-native";
import { Entypo } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import styled from "styled-components";

export default function TodoList({ item, deleteItem }) {
  return (
    <ComponentContainer>
      <ListContainer>
        <CirlceContainer>
          <Entypo name="circle" size={20} color="midnightblue" />
        </CirlceContainer>
        <View>
          <TextItem>{item.value}</TextItem>
          <TextDate> Task</TextDate>
        </View>
        <IconContainer onPress={() => deleteItem(item.key)}>
          <MaterialIcons name="delete" size={24} color="midnightblue" />
        </IconContainer>
      </ListContainer>
    </ComponentContainer>
  );
}

const ListContainer = styled.TouchableOpacity`
  background-color: whitesmoke;
  height: auto;
  width: 350px;
  margin-bottom: 30px;
  border-radius: 10px;
  flex-direction: row;
  justify-content: space-between;
`;

const ComponentContainer = styled.View`
  flex-direction: row;
  justify-content: center;
  height: auto;
  width: auto;
`;

const TextItem = styled.Text`
  color: black;
  width: 260px;
  height: auto;
  font-size: 20px;
  margin-top: 10px;
  margin-right: 20px;
  font-family: poppins-regular;
`;

const TextDate = styled.Text`
  color: goldenrod;
  font-size: 15px;
  margin-right: 20px;

  font-family: poppins-regular;
  border-radius: 10px;
  width: 40px;
`;

const IconContainer = styled.TouchableOpacity`
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-top: 15px;

  height: 40px;

  border-radius: 10px;
`;

const CirlceContainer = styled.View`
  align-items: center;
  justify-content: center;
  padding-left: 5px;
`;
위 코드에서 우리는 목록에서 항목을 삭제할 수 있습니다. 우리는 아이콘을 사용하여 삭제 단추를 표시하고, 이 단추를 누르면 목록의 항목을 삭제합니다.

마지막 윤색


FlatList에는 추가 도구도 함께 제공됩니다.하지만 우리는 다른 두 가지를 주목할 것이다.이 세 가지 영역은 다음과 같습니다.
a、 ListHeaderComponent
b、 ListentyComponent
ListHeaderComponent에는 목록 제목이 포함된 구성 요소가 포함됩니다.우리의 헤딩을 기억해라.js 파일?그것을 사용할 때가 되었다.
//Header.js

import React from "react";
import styled from "styled-components";

let today = new Date().toISOString().slice(0, 10);

export default function Header() {
  return (
    <ComponentContainer>
      <HeaderText>To-Do.</HeaderText>
      <HeaderList>{today}</HeaderList>
    </ComponentContainer>
  );
}

const ComponentContainer = styled.View`
  height: 100px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
`;

const HeaderText = styled.Text`
  color: white;
  font-family: poppins-bold;
  font-size: 30px;
`;

const HeaderList = styled.Text`
  color: white;
  font-family: poppins-bold;
  font-size: 20px;
  margin-right: 20px;
`;
이 구성 요소는 화면의 맨 위에 있습니다.우리 프로그램에 대해 약간의 변경을 진행합시다.js 파일.
//App.js
  ...
import Header from "./Components/Header";
  ...

<FlatList
            data={data}
            ListHeaderComponent={() => <Header />}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => (
              <TodoList item={item} deleteItem={deleteItem} />
            )}
          />
또 다른 도구는ListMPtyComponent입니다. 업무 목록이 비어 있을 때 구성 요소를 보여 줍니다.여기서 Empty에서 빈 구성 요소를 가져옵니다.js
//App.js
  ...
import Empty from "./Components/Empty";
  ...

<FlatList
            data={data}
            ListHeaderComponent={() => <Header />}
            ListEmptyComponent={() => <Empty />}
            keyExtractor={(item) => item.key}
            renderItem={({ item }) => (
              <TodoList item={item} deleteItem={deleteItem} />
            )}
          />

결론


!이것은 많은 코드다.나는 네가 연습을 좀 해서 손을 더럽히기를 바란다.이것은 가장 좋은 학습 방식이다.나는 네가 자신의 입맛에 따라 코드를 조정하고 그 중에서 좋은 것을 만들어 내는 것을 보고 싶다.노력과 여행 중에 행운이 있기를 바랍니다.
여기서 소스 코드를 찾을 수 있습니다 https://github.com/ReenyDavidson/native-todo/tree/main
Laavel에서 웹 API 사용
bzoj 2121 DP

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage