react-native(2)

스타일링 하는 방법

1. inline style

const App: () => Node = () => {
  return (
    <>
      <View
        style={{
          backgroundColor: 'green',
          height: '100%',
          paddingTop: 50,
        }}>
        <View>
          <Text> hello world</Text>
        </View>

        <View>
          <Text> hello world</Text>
        </View>

        <View>
          <Text> hello world</Text>
        </View>
      </View>
    </>
  );
};

2. StyleSheet 사용

const App: () => Node = () => {
  return (
    <>
      <View style={styles.mainView}>
        <View>
          <Text> hello world</Text>
        </View>

        <View>
          <Text> hello world</Text>
        </View>

        <View>
          <Text> hello world</Text>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    backgroundColor: 'green',
    paddingTop: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
});