react native : flex 弹性布局

demo :

• 父组件传值给子组件

• 子组件回调数据给父组件

import React from 'react';
import {ScrollView, Text, View, Dimensions, StyleSheet} from 'react-native';
import PropTypes from 'prop-types';

let {height, width} = Dimensions.get('window');

export default class FlexTest2 extends React.Component {

    constructor() {
        super();
        this.state = {
            _flexWrap: 'nowrap',
            _flexDirection: 'row',
            _justifyContent: 'flex-start',
            _alignItems: 'stretch',
            flexDirections: ['row', 'row-reverse', 'column', 'column-reverse'],
            flexWraps: ['nowrap', 'wrap'],
            justifyContents: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'],
            alignItems: ['flex-start', 'flex-end', 'center', 'stretch'],
        };
    }

    switchAlignItems(type) {
        this.setState({
            _alignItems: type,
        });
    }

    switchJustifyContent(type) {
        this.setState({
            _justifyContent: type,
        });
    }

    switchFlexDirection(type) {
        this.setState({
            _flexDirection: type,
        });
    }

    switchFlexWrap(type) {
        this.setState({
            _flexWrap: type,
        });
    }

    render() {
        return (
            <ScrollView>

                <View>
                    <Text style={{textAlign: 'center'}}>FlexDirection</Text>
                    <SwitchBtn list={this.state.flexDirections}
                               type={this.switchFlexDirection.bind(this)}/>

                    <Text style={{textAlign: 'center'}}>flexWraps</Text>
                    <SwitchBtn list={this.state.flexWraps}
                               type={this.switchFlexWrap.bind(this)}/>

                    <Text style={{textAlign: 'center'}}>justifyContents</Text>
                    <SwitchBtn list={this.state.justifyContents}
                               type={this.switchJustifyContent.bind(this)}/>

                    <Text style={{textAlign: 'center'}}>alignItems</Text>
                    <SwitchBtn list={this.state.alignItems}
                               type={this.switchAlignItems.bind(this)}/>

                    <View style={{
                        flexWrap: this.state._flexWrap,
                        flexDirection: this.state._flexDirection,
                        justifyContent: this.state._justifyContent,
                        alignItems: this.state._alignItems,
                        backgroundColor: '#000000',
                        marginTop: 20,
                        height: 200,
                        marginBottom: 40,
                    }}>
                        <View style={{width: 150, height: 70, backgroundColor: '#ffff00'}}>
                            <Text style={{
                                fontSize: 16, lineHeight: 70,
                                textAlign: 'center', color: '#000000',
                            }}>
                                1
                            </Text>
                        </View>
                        <View style={{width: 150, height: 50, backgroundColor: '#ff0000'}}>
                            <Text style={{
                                fontSize: 16, lineHeight: 50,
                                textAlign: 'center', color: '#000000',
                            }}>
                                2
                            </Text>
                        </View>
                        <View style={{width: 150, height: 45, backgroundColor: '#00ff00'}}>
                            <Text style={{
                                fontSize: 16, lineHeight: 45,
                                textAlign: 'center', color: '#000000',
                            }}>
                                3
                            </Text>
                        </View>
                        <View style={{width: 150, height: 60, backgroundColor: '#0000ff'}}>
                            <Text style={{
                                fontSize: 16, lineHeight: 60,
                                textAlign: 'center', color: '#000000',
                            }}>
                                4
                            </Text>
                        </View>
                    </View>
                </View>
            </ScrollView>
        );
    }
}

class SwitchBtn extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            current: 0,
            selectedBg: '#ff0000',
            unselectedBg: '#999999',
        };
    }

    _onPressedCustom(index) {
        this.setState({
            current: index,
        });
        console.log(this.props.list[index]);
        this.props.type(this.props.list[index]);
    }

    static defaultProps = {
        list: [],
    };


    static propTypes = {
        list: PropTypes.array,
    };

    renderText(callback) {
        let inputs = [];
        for (let i = 0; i < this.props.list.length; i++) {
            inputs.push(
                <Text onPress={() => this._onPressedCustom(i)}
                      style={[styles.switchBtnType,
                          {
                              backgroundColor: this.state.current === i ?
                                  this.state.selectedBg :
                                  this.state.unselectedBg,
                          }]}
                >
                    {this.props.list[i]}
                </Text>,
            );
        }

        return inputs;
    }

    render() {
        return (
            <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
                {this.renderText()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    switchBtnType: {
        fontSize: 15,
        height: 50,
        lineHeight: 50,
        textAlign: 'center',
        borderColor: '#9fff54',
        marginTop: 2,
        marginLeft: 2,
        borderRadius: 25,
        width: width * 5 / 12,
        color: 'white',
        fontWeight: 'bold',
    },
});