如何在 React Native 中将 Flex in a Row 用于其两个子视图

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