如何在 React Native 中为其两个子视图连续使用 Flex？

Question

我的代码是这样的---

import React from 'react';
import {View,Text,Alert,StyleSheet} from 'react-native';

const data = ['All','Electronics','Baby and Child','Property']; 

const styles=StyleSheet.create({
    itemStyles: {
        color: "#F456A3",
        fontSize:30,
        fontWeight:"bold",

    },
    CategoryStyle: {
        flex:1,
        justifyContent:'center',
        flexDirection:'row'
    }
});

export default class FilterScreen extends React.Component {

    constructor(){
        super();
        this.test;
    }

    renderCategories = () =>{
        //Alert.alert(data[0]);
        this.test=data.map(item => {
            return(
                <View key={item} style={styles.CategoryStyle}>
                    <Text style={styles.itemStyles}>{item}</Text>
                </View>
                )
        })

        return this.test;
    }

    render(){
        return(
            <View>
                <Text>hello world</Text>
                {this.renderCategories()}
            </View>
            )
    }
}

我必须将样式应用于呈现类别中的文本，以便它应该连续包含 2 个文本。所以，这里将有 2 行 2 文本。

如何做到这一点？

Answer 1

对于styles.itemStyles，将其设置为width: '50%'，并将flexWrap 添加到父级。试试这个：

const styles=StyleSheet.create({
    itemStyles: {
        color: "#F456A3",
        fontSize:30,
        fontWeight:"bold",
        width: '50%' ///////////////// i added this

    },
    CategoryStyle: {
        flex:1,
        justifyContent:'center',
        flexDirection:'row',
        flexWrap: 'wrap' ///////// added this
    }
});

这是一个有效的小吃博览会 - https://snack.expo.io/BJY_WnrrG

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.text, styles.textPink]}>a</Text>
        <Text style={[styles.text, styles.textBlue]}>b</Text>
        <Text style={[styles.text, styles.textPink]}>c</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    flexDirection: 'row',
    justifyContent: 'flex-end', 
    flexWrap: 'wrap',
    alignContent: 'space-around',
    alignItems: 'flex-start',
    backgroundColor: 'steelblue'
  },
  text: {
    width: '50%'
  },
  textBlue: {
    backgroundColor: 'skyblue'
  },
  textPink: {
    backgroundColor: 'pink'
  }
});

当项目包装时，您会获得alignContent 的新样式属性，请查看 - http://facebook.github.io/react-native/docs/layout-props.html#aligncontent

此外，当项目换行时，justifyContent 仅影响剩余空间的行，如上面的第三个文本项所示。