css - 如何在React Native中将Flex连续用于其两个 subview ？

我的代码是这样的-

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>
            )
    }
}

我必须将样式应用于呈现类别中存在的Text，这样它应该连续带有2个文本。因此，这里将有2行包含2个文本。

那怎么办？

最佳答案

对于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仅影响剩余空间的行，如上面的第三个文本项所示。

关于css - 如何在React Native中将Flex连续用于其两个 subview ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48416535/