Style 속성 정보

CSS와 같은 속성 그룹이지만 CSS와 다를 수 있습니다.

flex:number 라고 하는 기술

position:'fixed' 없음

등등.
그래서, flex 프로퍼티를 해설하는 것과 동시에, 단조나 고정 요소의 배치 방법을 써 가고 싶습니다.

flex 속성 정보

샘플 코드 등을 보면 flex:1이라는 설명을 잘 볼 수 있습니다.
flex 속성은 화면에 대한 요소의 flexDirection 방향의 크기 비율입니다.

import {StyleSheet} from 'react-native';

const style = StyleSheet.create({
  container:{
    marginTop:20,
    flex:1,
    //flexDirection:'column' ##defaultValue
  }
});

위의 경우에 화면에 flex:1의 요소를 추가해 나가면 거동은 아래와 같이 됩니다.



하나만 요소가 있을 때는 화면 눈 한 잔에 요소가 퍼집니다.
2개 이상의 요소가 있을 때는 요소의 크기는 균등할 수 있습니다. 이는 추가되는 요소의 flex 값이 같기 때문입니다.

이어서

처음에는 flex:1

다음은 flex:2

다음은 flex:3

다음은·····

와 같이 요소를 추가해 나가면 거동은 아래와 같습니다.



그러면 다음은 균등할 수 없습니다. 이것은 2개의 요소가 있는 경우는 1:2의 비율로, 3개의 요소가 있는 경우는 1:2:3의 비율로・・・라고 하는 상태에 표시되고 있기 때문입니다.

flexDirection:'row'

의 경우의 거동은 아래와 같습니다. 이때도 최초의 gif 애니메이션과 마찬가지로 flex:1의 요소를 추가하고 있습니다.



이상과 같이 flex 프로퍼티는 flexDirection에 대한 비율을 결정하는 프로퍼티입니다.
flex 속성에는 소수도 사용할 수 있지만 기본 사양은 동일합니다.

flex를 이용한 배치 방법으로 헤더, 바닥글, 사이드바를 놓는다

flex를 이용한 배치 방법을 사용함으로써 단조롭게 배치시킬 수 있습니다.
구체적으로

    <View style={{flex:1}}>

        {/*ヘッダー（赤）*/}
        <View style={[{flex:0.3},header]}>
          <Text style={textStyle}>
            This is Header
          </Text>
        </View>

        {/*メインコンテンツ*/}
        <View style={{flex:2, flexDirection:'row'}}>

　　　　　　　　　　　　　　　　　　　　{/*スクロール領域（白）*/}
          <View style={{flex:5}}>
            <ListView
              dataSource={this.state.dataSource}
              renderRow={
                rowData =>
                  (<Text style={{marginLeft:20}}>
                    {rowData.message}
                  </Text>)
              }
            />
          </View>

          {/*サイドエリア（紫）*/}
          <View style={[{flex:1},side]}>
            <Text style={textStyle}>
              This is sidebar
            </Text>
          </View>

        </View>

        {/*フッター（青緑）*/}
        <View style={[{flex:0.5},footer]}>
            <Text style={textStyle}>This is Footer</Text>
        </View>

      </View>

flex 관계의 속성은 외출하고 쓰고 있습니다.
이 경우에는
헤더: 메인 컨텐츠: 바닥글의 flex 속성 값은 0.3:2:0.5이므로 이 비율은 세로 길이의 비율입니다.

이어서, 메인 컨텐츠에서는 flexDirection:'row'가 지정되어 있기 (위해)때문에, 메인 컨텐츠내의 flex 프로퍼티의 비율은 횡 방향의 비율이 됩니다. 따라서 메인 콘텐츠는 가로로
스크롤 영역 : 사이드 바 = 5 : 1입니다.
　　
이런 식으로 flex 속성을 사용하여 비율로 배치할 수 있습니다.

고정 배치에 대해

React Native에서 position 속성의 속성 값은 'absolute'와 'relative'만 처리할 수 있으며 'fixed'를 처리할 수 없습니다.
그러나 얼마나 화면에 대략적인 요소를 표시시켜도 스크롤할 수 없는 사양이므로 고정 요소의 표시는 간단하게 실시할 수 있습니다.
스크롤을 하기 위해서는 ScrollView 컴퍼넌트 또는 ListView 컴퍼넌트를 사용합니다.

      <View style={{flex:1}}>
          <View style={{
              width:100,
              height:100,
              margin:20,
              top:10,
              backgroundColor:'blue',
              position:'absolute'
            }} />
          <ScrollView>
            {this._renderBox()}
          </ScrollView>
          <View style={{
              width:100,
              height:100,
              margin:20,
              backgroundColor:'red',
              position:'absolute',
              top:300
            }} />
      </View>

이 이미지에서는 검은 사각형이 있는 레이어가 ScrollView를 구현한 영역. 빨간색 사각형과 파란색 사각형이 스크롤을 구현하지 않는 구성 요소입니다.
빨간색과 파란색 사각형처럼 스크롤을 구현하지 않고 스크롤 가능 영역에 배치하여 고정 요소를 구현할 수 있습니다.

이상입니다.
실수 등 있으면 지적하실 수 있으면 다행입니다.