소개

React Native은 기본 앱(ios 또는 android)을 빌드하기 위한 반응 프레임워크입니다. 이 프로젝트를 생성하려면 React Native 또는 Exposee details를 사용할 수 있습니다.

전제 조건

리액트

후크

나는 당신이 이미 기본 반응과 후크를 알고 있다고 가정하므로 모든 세부 사항을 말하지 않을 것입니다. 이것을 통과하면 이 튜토리얼을 따라가는 것이 좋습니다.

시작하자

React Native를 사용하여 새 앱을 만들 예정입니다.

npx react-native init counter

터미널에서 실행해야 합니다. npx를 사용하면 전역적으로 react-native를 설치하지 않고도 react-native를 만들 수 있습니다.

확인! 다음으로 vs 코드 또는 원하는 편집기에서 프로젝트를 엽니다. yarn start를 사용하여 프로젝트 실행

반응 네이티브 명령을 사용했기 때문에 결과를 보려면 시뮬레이터를 사용하거나 휴대폰을 연결해야 합니다see details.

이 튜토리얼에서는 화면이 많지 않기 때문에 app.js에만 집중해야 합니다. 그 안의 모든 코드를 삭제하거나 아래 코드로 다시 작성하십시오.

import React from 'react';
import {View, Text} from 'react-native';

const App = () => {
  return (
    <View>
      <Text>React Native</Text>
    </View>
  );
};

export default App;

화면에 'React Native' 텍스트가 표시되어야 합니다.

다음으로 useState를 사용하여 번호 상태를 관리합니다. 그것을하는 방법? 간단합니다. 상태를 저장할 변수를 선언하기만 하면 됩니다. 나는 그것을 번호라고 부를 것이다.

const [number, setNumber] = useState(0);

setNumber 여기에 'set' + 'state' 변수의 조합인 setState에 대한 일반적인 방법이 있습니다.

그런 다음 전체 화면을 터치할 수 있도록 만들어야 합니다. 이를 위해 react-native에서 View 태그를 TouchableOpacity로 덮어쓰기만 하면 됩니다. 반응 네이티브에서 가져오는 것을 잊지 마세요. 다음으로 Text 태그 안에 번호 상태를 전달합니다. 이제 코드는 다음과 같아야 합니다.

<TouchableOpacity>
  <Text>
    {number}
  </Text>
</TouchableOpacity>

핸들 상태

이제 상태 변경을 처리해야 숫자를 증가시킬 수 있습니다. TouchableOpacity 태그onPress 내에서 <TouchableOpacity onPress={handlePress}> 이벤트를 전달합니다. handlePress를 setNumber(number + 1)로 만듭니다.

const handlePress = () => {
  setNumber(number + 1);
}

원하는 대로 숫자의 스타일을 지정할 수 있습니다. 저는 숫자를 중앙에 배치했습니다. 내 코드는 이제 다음과 같습니다.

import React, {useState, useEffect} from 'react';
import {
  Text,
  StyleSheet,
  TouchableOpacity
} from 'react-native';

const App = () => {
  const [number, setNumber] = useState(0);

  const handlePress = () => {
    setNumber(number + 1);
  };

  return (
    <TouchableOpacity
      style={styles.container}
      activeOpacity={1}
      onPress={handlePress}>
      <Text style={styles.number}>
        {number}
      </Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  number: {
    fontSize: 96,
  }
});

export default App;

애플리케이션이 자동으로 새로고침되지 않는 경우가 있습니다. 이 경우 앱을 중지하고 앱을 다시 번들로 묶어야 할 수 있습니다.

상태 재설정을 위한 뒤로 버튼

핸들 상태를 완료했으므로 숫자의 상태를 0으로 재설정하는 방법을 찾아야 합니다. 이를 수행하는 방법에는 여러 가지가 있습니다. 스마트폰의 뒤로 버튼을 선택하여 상태를 재설정하겠습니다.

반응 네이티브에서 Backhandler를 가져와야 합니다. 이 백핸들러를 수신하려면 useEffect 를 사용해야 합니다. 그러나 이Backhandler는 Android 기기에서만 사용할 수 있습니다. 이에 대한 세부 정보를 볼 수 있습니다backhandler.

useEffect(() => {
  const backAction = () => {
    if (number !== 0) {
      setNumber(0);
      BackHandler.removeEventListener();
    } else {
      BackHandler.exitApp();
    }

    return true;
  };

  const backHandler = BackHandler.addEventListener(
   'hardwareBackPress',
    backAction,
  );

  return () => backHandler.remove();
}, [number]);

뒤로 버튼을 누를 때마다 앱은 숫자가 0인지 여부를 확인합니다. 숫자가 0이면 앱을 종료하고 숫자가 0이 아니면 숫자를 0으로 재설정합니다. 숫자 상태가 변경될 때마다 이 함수가 실행되도록 [number] 종속성을 추가합니다.



잘하셨습니다. 이 기본 기능을 완료했습니다. 하지만 이 앱이 좀 더 보기 좋게 변경 테마를 추가하겠습니다.

테마 전환

반응 네이티브에서 Switch를 가져와야 합니다. 그런 다음 앱에 추가하십시오. 세부 정보를 볼 수 있습니다here.

<Switch
 trackColor={{false: '#767577', true: '#3BBACB'}}
 thumbColor={isEnabled ? '#151A23' : '#F3F4F6'}
 onValueChange={toggleSwitch}
 value={isEnabled}
 style={styles.switch}
/>

스위치를 추적하기 위해 useState 를 사용합니다. 간단히 const [isEnabled, setIsEnabled] = useState(false); 및 const toggleSwitch = () => setIsEnabled(!isEnabled); . 또한 TouchableOpacity 내부에 배경색을 전달해야 합니다. 이제 우리의 코드는 다음과 같아야 합니다.

<TouchableOpacity
  style={[
   styles.container,
     {backgroundColor: isEnabled ? '#56CCF2' : '#151A23'},
   ]}
   activeOpacity={1}
   onPress={handlePress}>
   <Text style={[styles.number, {color: isEnabled ? '#151A23' : '#F3F4F6'}]}>
     {number}
   </Text>
   <Switch
      trackColor={{false: '#767577', true: '#3BBACB'}}
      thumbColor={isEnabled ? '#151A23' : '#F3F4F6'}
      onValueChange={toggleSwitch}
      value={isEnabled}
      style={styles.switch}
    />
</TouchableOpacity>

...
switch: {
  position: 'absolute',
  bottom: 0,
  marginBottom: 32,
}

이 자습서를 따라 주셔서 감사합니다. 전체 코드here를 찾을 수 있습니다.