React Native (1) FlexBox 레이아웃

전재 에 오신 것 을 환영 합 니 다. 전재 출처 를 표시 해 주 십시오.http://blog.csdn.net/johnny901114/article/details/53241550 본문 은 [여지 강의 블 로그] 에서 나 왔 다.
React Native 에 서 는 주로 FlexBox 를 사용 하여 레이아웃 합 니 다.
React Native 의 개발 환경 을 설치 한 사람 은 index. android. js / index. ios. js 의 파일 내용 은 다음 과 같 습 니 다.

export default class TemplateDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'
'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

위의:

<View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'
'}
          Cmd+D or shake for dev menu
</View>

Android 의 레이아웃 처럼 style 은 view 를 어떻게 표시 하 는 지 정의 합 니 다.다음은 플 렉 스 박스 의 속성 을 살 펴 보 겠 습 니 다.
1. 용기 속성
1、flexDirection ：
용기 안의 원소 의 배열 방식 [주축 방향] 으로 값 을 얻 을 수 있다 row | row-reverse | column | column-reverse.column: 위 에서 아래로 세로 배열 [기본 값]. 효 과 는 아래 그림 과 같다.
'column - reverse': 아래 에서 위로, 세로 로 배열 합 니 다. 효 과 는 아래 그림 과 같 습 니 다.row: 왼쪽 에서 오른쪽으로 수평 으로 배열 하고 효 과 는 다음 그림 과 같다.row-reverse: 오른쪽 에서 왼쪽으로 수평 으로 배열 하고 효 과 는 다음 그림 과 같다.
2, justifyContent 속성
justify Content 속성 은 용기 안의 요 소 를 주축 선 에서 정렬 하 는 방식 을 지정 합 니 다. 값 flex-start | flex-end | center | space-between | space-around flex-start (기본 값) 을 추출 할 수 있 습 니 다. 신축 항목 은 한 줄 의 시작 위치 로 정렬 합 니 다. 효 과 는 다음 그림 과 같 습 니 다.flex-end: 요소 가 한 줄 의 끝 위치 에 일치 하고 효 과 는 다음 그림 과 같다.center: 원 소 는 한 줄 의 중간 위치 로 일치 하고 효 과 는 다음 그림 과 같다.space-between: 양 끝 이 일치 하고 요소 간 의 간격 이 같 으 며 효 과 는 다음 그림 과 같다.space-around: 요 소 는 줄 에 평균 적 으로 분포 되 고 양 끝 은 절반 (중간 간격의 절반) 의 공간 을 보존 하 며 효 과 는 다음 그림 과 같다.
3 、 alignItems 속성
alignItems: 사 이 드 축 (주축 에 수직) 의 '정렬 방식'.flex - start: 교차 축의 출발점 정렬.효 과 는 다음 과 같다.
flex - end: 교차 축의 종점 정렬.효 과 는 다음 과 같다.
center: 교차 축의 중심 점 정렬.효 과 는 다음 과 같다.
stretch (기본 값): 항목 이 높이 를 설정 하지 않 거나 auto 로 설정 되 어 있 으 면 전체 용기 의 높이 를 차지 합 니 다.첫 번 째 View 의 height 속성 을 설명 한 다음 에 alignItems 를 stretch 로 설정 합 니 다. 효 과 는 다음 과 같 습 니 다.
4, flexWrap 속성
flexWrap: 기본 적 인 상황 에서 항목 은 모두 하나의 선 (일명 '축선') 에 배열 되 어 있 습 니 다.flex - wrap 속성 정의, 축선 이 배열 되 지 않 으 면 줄 을 어떻게 바 꿉 니까?nowrap (기본 값): 줄 을 바 꾸 지 않 습 니 다.효 과 는 다음 과 같 습 니 다:
wrap: 줄 바 꾸 기, 첫 번 째 줄 은 위 에 있 습 니 다.효 과 는 다음 과 같 습 니 다:
wrap - reverse: 줄 을 바 꾸 고 첫 줄 은 아래 에 있 습 니 다.[react Native 는 이 속성 값 을 지원 하지 않 습 니 다]
원소 속성
1. flex 속성
flex 속성 은 'flex - grow', 'flex - shrink', 'flex - basis' 세 가지 속성의 줄 임 말 로 그 중에서 두 번 째 와 세 번 째 매개 변수 (flex - shrink, flex - basis) 는 선택 가능 한 매개 변수 입 니 다.기본 값 은 "0.1 auto" 입 니 다. ＝ ( flexGrow / sum( flexGrow ) ) 이 요소 가 너비 와 높이 를 설정 하면 그의 너비 = 원래 의 너비 + 한 줄 의 공백 너비 (flexGrow / sum (flexGrow) 는 다음 과 같은 세 개의 컨트롤 로 플 렉 스 속성 을 각각 1, 2, 3 으로 설정 합 니 다.이에 따라 첫 번 째 컨트롤 은 화면 너비 의 1 / (1 + 2 + 3), 두 번 째 컨트롤 은 2 (1 + 2 + 3), 세 번 째 는 3 / (1 + 2 + 3) 를 차지한다. 다음 과 같다.
2. alignSelf 속성 alignSelf 수치 범위: "auto | flex - start | flex - end | center | baseline | stretch" align - self 속성 은 하나의 항목 이 다른 항목 과 다른 정렬 방식 을 허용 하고 align - items 속성 을 덮어 쓸 수 있 습 니 다.기본 값 은 auto 입 니 다. 부모 요 소 를 계승 하 는 alignItems 속성 을 표시 합 니 다. 부모 요소 가 없 으 면 stretch 과 같 습 니 다.메모: react Native 는 이 속성 값 을 지원 하지 않 습 니 다. baseline 은 현재 두 번 째 View 를 alignSelf: 'flex - start' 로 설정 합 니 다. 효 과 는 다음 과 같 습 니 다.
alignSelf: 'flex - end' 효 과 는 다음 과 같 습 니 다.
alignSelf: 'center' 로 설정 하면 다음 과 같 습 니 다.
alignSelf: 'stretch' 로 설정 하고 높이 를 설정 하지 않 습 니 다. 효 과 는 다음 과 같 습 니 다.
3. 몇 가지 간단 한 예
1. 절대 포 지 셔 닝 과 상대 포 지 셔 닝: css 포 지 셔 닝 과 달리 React Native 에서 포 지 셔 닝 은 부모 구성 요소 에서 position 속성 을 설정 할 필요 가 없습니다.
일반적인 상황 에서 position: 'relative' 를 설정 하 는 것 은 position 속성 을 설정 하지 않 는 것 과 포 지 셔 닝 효 과 는 같 지만 부모 구성 요소 가 내부 거 리 를 설정 하면 position 은 해당 하 는 포 지 셔 닝 변 화 를 하고 absolute 는 그렇지 않 습 니 다.
View 가 position: 'absolute' 를 설정 하면 이 View 나 부모 View 설정 padding 은 이 View 에 무효 입 니 다.
2, 높 은 해상도 획득

var width = require(‘Dimensions’).get(‘window’).width; 
var height = require(‘Dimensions’).get(‘window’).height; 
var scale = require(‘Dimensions’).get(‘window’).scale; 

더 간결 한 방법 이 있다.

var {width,height,scale} = require(‘Dimensions’).get(‘window’);

3. 기본 너비 문제 View 는 폭 을 설정 하지 않 고 기본적으로 한 줄 을 차지 합 니 다. 위 에 화면 해상 도 를 표시 하 는 View 를 배경 으로 설정 하면 View 가 폭 을 설정 하지 않 고 기본적으로 한 줄 을 차지 하 는 것 을 발견 할 수 있 습 니 다.
4. 본 블 로그 의 모든 코드 전시:

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
//330 375 = 45 15+30
var {width, height,scale} = require('Dimensions').get('window');
export default class FlexBoxDemo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text_style1}>{width}</Text>
                <Text style={styles.text_style2}/>
                <Text style={styles.text_style3}/>
                <Text style={styles.text_style4}/>
                <Text style={styles.text_style5}/>
                <Text style={styles.text_style6}/>
            </View>
        );
    }
}

class PositionDemo extends Component {
    render() {
        return (
            <View style={{backgroundColor: '#F5FCFF', height: 200, paddingTop: 30,paddingBottom:100,flexDirection:'column'}}>
                <Text style={styles.positionStyle}/>

                <Text style={{backgroundColor:'gray'}}>width x height={width} x {height}; scale:{scale}</Text>
                {/*      <Text style={{backgroundColor:'blue'}}/>*/}
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        //flex: 1,
        backgroundColor: '#F5FCFF',
        flexDirection: 'row',
        marginTop: 30,
        height: 200,
        justifyContent: 'flex-start',
        alignItems: 'stretch',
        flexWrap: 'wrap',
    },
    text_style1: {
        width: 40,
        height: 50,
        backgroundColor: '#9900ff',
        //flex: 1,

        //textAlign: 'center',//        
    },

    text_style2: {
        width: 40,
        height: 60,
        backgroundColor: '#99ee00',
        //flex: 2,
        // alignSelf: 'stretch'
    },

    text_style3: {
        width: 80,
        height: 30,
        backgroundColor: '#ff9900',
        //flex: 3,

    },

    text_style4: {
        width: 50,
        height: 70,
        backgroundColor: '#99ff00',
        //flex: 3,
    },

    text_style5: {
        width: 90,
        height: 70,
        backgroundColor: '#99ee00',
        //flex: 3,
    },
    text_style6: {
        width: 80,
        height: 70,
        backgroundColor: '#ff9900',
    },

    positionStyle: {
        //flex:1,
        height: 50,
        width: 100,
        backgroundColor: 'black',
        position: 'absolute',//absolute
        bottom: 20,
        left: 120,
        //paddingBottom: 40, //  position:'absolute'， paddingBottom:40  
        //       position absolute，         ，
        //             ，position          ， absolute   。
    }

});

AppRegistry.registerComponent('FlexBoxDemo', () => PositionDemo);