在 React Native 中使用 Flexbox

让我们将 Web 中的布局转换到 React Native 上。

我们以栅格系统为例，如下。

'use strict';
var React = require('react-native');
var {
    Text,
    View
} = React;

var styles = React.StyleSheet.create({
    grid: {
        padding: 30,
        marginTop: 65,
        borderColor: '#e7e7e7',
    },
    grid__row :{
        flex: 1,
        flexDirection: 'row',
        padding: 5,
    },

    grid__item: {
        flex: 1,
        backgroundColor: '#e7e7e7',
          height: 30,
          textAlign: 'center',
    }
});

class SimpleApp extends React.Component {
    render() {
        return (
        <View style={styles.grid}>
            <View style={styles.grid__row}>
                <Text style={styles.grid__item}>1</Text>
                <Text style={styles.grid__item}>2</Text>
            </View>
            <View style={styles.grid__row}>
                <Text style={styles.grid__item}>1</Text>
                <Text style={styles.grid__item}>2</Text>
                <Text style={styles.grid__item}>3</Text>
            </View>
            <View style={styles.grid__row}>
                <Text style={styles.grid__item}>1</Text>
                <Text style={styles.grid__item}>2</Text>
                <Text style={styles.grid__item}>3</Text>
                <Text style={styles.grid__item}>4</Text>
            </View>
        </View>
        )
    }
}

React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

在上面的代码中，我们用 View 组件来替代了所有的 div 节点，用样式表组件来代替了 CSS 类。