#7. FlexDirection, stack Navigation

align, justify

• 함수로 필요한 세팅값 정의
  • 스타일 인덱스, 해당스타일 table, 설정 함수 명
    • → 스타일 인덱스 +1 해서 스타일 테이블 가져오고 스타일 설정해줌
    • flexDirection은 요소 4개로 인덱스 3번까지만 있음. 4번 넘어가면 오버플로우
      • 방법1) length 고정 - 최대값 넣고 끝내기
      • 방법2) 넘어가면 0으로 바꾸기

const changeSetting = (value, options, setterfunction) => {
    var targetValue = 0;
    if (value == options.length - 1) { //인덱스 넘어가면
      targetValue = 0;   // 0으로 바꿔버려라 
    } else {
      targetValue = value + 1;
    }
    setterfunction(targetValue);
    console.log(options[targetValue]);
  };

const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
  const justifyContents = [
    'flex-start',
    'flex-end',
    'center',
    'space-between',
    'space-around',
    'space-evenly',
  ];
  const alignItems = ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'];
  const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
  const directions = ['inherit', 'ltr', 'rtl'];

  const [flexDirection, setFlexDirection] = useState(0);

  const hookedStyles = {
    flexDirection: flexDirections[flexDirection],
		// 여기에 추가추가

• 화면 전환!

install instructions

npm install @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

npm install react-native-screens react-native-safe-area-context

npx pod-install ios : for MacOs

npm install @react-navigation/stack