React Native의 앱은 스타일 시트로 각 컴포넌트의 배치, 색, 폰트 등의 디자인을 결정해 갑니다. Web프로그래머라면 몸에 스며들고 있는 padding등을 사용하므로, 곧바로 익숙해진다고 생각합니다. 공식 문서로부터 일람을 볼 수 있습니다만, border계는 아래와 같이 됩니다. 주의점으로서, 하이픈(-)으로 단어를 단락짓는 것이 아니라 CamelCase가 되어 있는 것입니다.

borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum('solid', 'dotted', 'dashed')
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number

이러한 익숙한 것이라면 직관적으로 기술해 갈 수 있습니다만, 그다지 익숙하지 않은 Flexbox의 기법을 이용해 배치를 실시할 필요가 있으므로, Flexbox를 취급합니다.

Flexbox

아래와 같은 컴퍼넌트를 전제로 이야기를 진행시켜 갑니다.

  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.item1}>
          <Text> Flex Item1</Text>
        </View>
        <View style={styles.item2}>
          <Text> Flex Item2</Text>
        </View>
      </View>
    );
  }

flex 속성

아마도 가장 먼저 빠지는 것이이 속성 일 것입니다. 행동이 facebook에 의해 정의 된 것 같습니다. .

var styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20
  },
  item2: {
    backgroundColor: 'gray',
    padding: 20
  }
});

위와 같은 스타일 시트에 flex:1를 Container에 추가하면 그 컴퍼넌트가 전체에 퍼집니다. 파랑의 컴포넌트가 전체가 되어 있는 것을 알 수 있다고 생각합니다.

var styles = StyleSheet.create({
  container: {
    flex: 1, // 追加
    backgroundColor: 'blue',
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20
  },
  item2: {
    backgroundColor: 'gray',
    padding: 20
  }
});

또한 동일한 컴포넌트 내에서 flex를 아래와 같이 지정하면,

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
  },
  item1: {
    flex: 1,　// 追加
    backgroundColor: 'gray',
    padding: 20
  },
  item2: {
    flex: 2, //　追加
    backgroundColor: 'orange',
    padding: 20
  }
});

item1の高さ: item2の高さ = 1 : 2 의 비율과 전체에 걸쳐 표시됩니다.

flexDirection 속성

container측의 요소로 이 요소의 배치의 종횡을 결정합니다.

column은 세로 정렬(기본값)

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column', // 追加。デフォルトはcolumnなので変化なし。
    backgroundColor: 'blue',
  },
  item1: {
    flex: 1,
    backgroundColor: 'gray',
    padding: 20
  },
  item2: {
    flex: 2,
    backgroundColor: 'orange',
    padding: 20
  }
});

row로 나란히

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // 追加
    backgroundColor: 'blue',
  },
  item1: {
    flex: 1,
    backgroundColor: 'gray',
    padding: 20
  },
  item2: {
    flex: 2,
    backgroundColor: 'orange',
    padding: 20
  }
});

flexWrap 속성

Container측(부모측)의 요소입니다. 컴퍼넌트가 들어갈 수 없었던 경우의 둘러싸기의 설정이 됩니다.

nowrap (기본값)

var styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'blue',
    flexWrap: 'nowrap', //　デフォルト。回り込みなし。
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
    width: 300,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  }
});

wrap는 돌린다.

var styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'blue',
    flexWrap: 'wrap',
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
    width: 300,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  }
});

조금 길어졌기 때문에 내일 part2에서 나머지 Flexbox에 대해 설명합니다.