React Native

project setting

yarn create expo-app projectName

LinearGradient

• import Code

  npx expo install expo-linear-gradient

• 예시 코드

import { LinearGradient } from "expo-linear-gradient";

<LinearGradient
	style={ {"transparent", "black", ∙∙∙} }
>
  
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 실전 예시
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        // Background Linear Gradient
        colors={['rgba(0,0,0,0.8)', 'transparent']}
        style={styles.background}
      />
      <LinearGradient
        // Button Linear Gradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.button}>
        <Text style={styles.text}>Sign in with Facebook</Text>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({ ... }); 
	  
</LinearGradient>

StyleSheet.absoluteFIll

• 레이아웃을 겹칠 때만 사용.
• 기존에 position : absolut top left right bottom 적용 안 해도 absolute 처럼 레이아웃 겹치기 가능.

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

const App = () => (
  <View style={styles.container}>
    <View style={styles.box1}>
      <Text style={styles.text}>1</Text>
    </View>
    <View style={styles.box2}>
      <Text style={styles.text}>2</Text>
    </View>
    <View style={styles.box3}>
      <Text style={styles.text}>3</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  box1: {
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
✅ ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
  box2: {
    ...StyleSheet.absoluteFill,
    width: 100,
    height: 100,
    backgroundColor: 'blue'
  },
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
  box3: {
    position: 'absolute',
    top: 120,
    left: 120,
    width: 100,
    height: 100,
    backgroundColor: 'green'
  },
  text: {
    color: '#FFF',
    fontSize: 80
  }
});

export default App;

Swiper

스와이프 Github 링크 들어가서 사용가능한 메소드 참고하기.

• 화면을 넘길 수 있는 기능을 편하게 구현하게 해주는 라이브러리

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View } from 'react-native'

✅ // import Code ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
import Swiper from 'react-native-swiper'
✅ ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

const styles = StyleSheet.create({
  wrapper: {},
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5'
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9'
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold'
  }
})

export default class SwiperComponent extends Component {
  render() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    )
  }
}

AppRegistry.registerComponent('myproject', () => SwiperComponent)

Device 높이 구하는 공식

• Dimensions을 통해서 실제 사용되는 디바이스의 height와 width을 측정해준다.

// util.js
import { Dimensions } from "react-native";

export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
  Dimensions.get("window");

<ActivityIndicator>

• 데이터를 불러오고 있는 loading 상태일 때, UI적으로 loading중을 알 수 있게 해주는 컴포넌트.
  
• 예시 코드

export default function Movies() {
  const [nowPlayings, setNowPlayings] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  const BASE_URL = "https://api.themoviedb.org/3/movie";
  const API_KEY = "9fc785675990759119cf9230a00120c6";
  // 👇 getNowPlayings에서 받아오는 API는 꽤나 길기 때문에, 서버에서 받아오는데 시간이 다소 걸릴 수 있음.
  //  때문에, 로딩중임을 표현하는 예외처리를 하나 주어야 한다.
  const getNowPlayings = async () => {
    const { results } = await fetch(
      `${BASE_URL}/now_playing?api_key=${API_KEY}&language=en-US&page=1`
    ).then((res) => res.json());
    setNowPlayings(results); // const [isLoading, setIsLoading] = useState(true); 기본 설정값인데, 해당 코드가 정상적으로 이루어진다면 아래 코드로 상태를 변경햊둘 것임.
    setIsLoading(false); // setNowPlayings으로 API가 정상적으로 mount 되었을 때, isLoading은 unmount됨으로 setIsLoding로 isLoading 값을 false로 바꿔준다.
  };

  // movies.js가 mount 될 때 마다 getNowPlayings()를 실행.
  useEffect(() => {
    getNowPlayings();
  }, []);

  if (isLoading) {
    return (
      <Loader>
        <ActivityIndicator />
      </Loader>
    ); // 데이터를 불러오고 있는 loading 상태일 때, UI적으로 loading중을 알 수 있게 해주는 컴포넌트.
  }