React Native 0.23 iOS: 柔軟なフレックスボックス レイアウトを体験する UI_html/css_WEB-ITnose

React Native では、レイアウトに CSS3 のフレックスボックスを使用します。たとえば、このような単純なレイアウト インターフェイスを実装します。

以下に示すように (垂直):

水平:

レイアウト ロジックは次のとおりです:

• 3 行。最初の行の高さは 50 pt に固定されており、2 行目は残りのスペースの 4 分の 3 を占め、3 行目は残りのスペースの 4 分の 1 を占めます。
• 2 行目には 3 列の要素があり、各列の要素はスペースの 3 分の 1 を占め、内容に応じて水平方向に中央に配置されます。垂直レイアウトでは、最初の列が下に整列され、2 番目の列が中央に配置され、3 番目の列が引き伸ばされます。

コンポーネントコード:

class FlexboxLayout extends Component {    render() {        return (            <View style={styles.container}>                <View style={styles.row1}></View>                <View style={styles.row2}>                    <Text style={styles.cell1}>1</Text>                    <Text style={styles.cell2}>2</Text>                    <Text style={styles.cell3}>3</Text>                </View>                <View style={styles.row3}></View>            </View>        );    }}

主な作業はスタイルの設定です。 まず、実装時に注意する必要があることがいくつかあります。 3 行の場合、高さを設定するだけです。値は iOS の点を表します。上に示すように、2 番目の flex 値を設定する必要があります。行は 4 分の 3 を占め、フレックス値は 3、3 行目は 4 分の 1 を占めます。1 つ目は、フレックス値が 1 です。

次に、2 行目の 3 列のビューの実装です。 React Native のデフォルトの flexDirection は列 (縦方向の配置) であるため、ここでは横方向の配置になるように手動で flexDirection を行に設定する必要があります。これを行うには、justifyContent を space-around に設定します。実際には、CSS3 の flexbox の justify-content プロパティに対応します。CSS を参照することをお勧めします。トリック。

スタイル コード:

const styles = StyleSheet.create({    container: {        flex: 1,    },    row1: {        height: 50,        backgroundColor: '#09A9DE'    },    row2: {        flex: 3,        backgroundColor: '#09DE53',        flexDirection: 'row',        justifyContent: 'space-around',        alignItems: 'center'    },    row3: {        flex: 1,        backgroundColor: '#DEDE09'    },    cell1: {        backgroundColor: '#BDBDBD',        padding: 20,        alignSelf: 'flex-end'    },    cell2: {        backgroundColor: '#BDBDBD',        padding: 20    },    cell3: {        backgroundColor: '#BDBDBD',        padding: 20,        alignSelf: 'stretch'    }});

最後に、各列の垂直方向の配置については、親ビューの alignItems 属性を設定できます。この値を配置のデフォルト値として使用できます。ここでは、デフォルトで 3 つの列が垂直方向に中央に配置されるように、中央に設定します。この場合、最初の列と 3 番目の列はそれぞれ下に揃えられ、引き伸ばされます。 、サブビューの alignSelf 属性を手動で設定できるため、最初の列の alignSelf 値は flex-end で、3 番目の列の alignSelf 値はストレッチです

最後に、個人的には次のように感じます。当面は React Native 全体とネイティブ Native を比較しません (このトピックは大きすぎます)。このフレックスボックス レイアウトと iOS 用に開発された現在の Autolayout レイアウトを比較してください。前者の方が後者よりも優れていると言えます。実際、自動レイアウトを実際に使用すると、Xcode Interface Builder でより複雑なページを編集したり、他のチームの自動レイアウト制約を読み取ったりすることが困難になることがあります。異なる自動レイアウト コード フレームワークを選択すると、特定の問題が発生する可能性があります。