react-native - 文本不包含在 React Native 组件中

Question

所以我正在使用 Flatlist，我使用数组中的数据，并将其显示在我的屏幕上。这就是我要说的。

我希望我的输出与红色框中显示的一样。

这是我的代码。

    _renderItem (item) {

        return(
            <View style={{ width: 350, flexGrow: 1, }}>            
              <Text style={{ fontSize: 16, color: 'black', }}>
                {item.law_practice_description} ,  // item.law_practice_description shows me the text like Administrative Adjudications etc
              </Text>
            </View>
        );
      }

     render() {

        return (
            <View style={{ flex: 1 }}>
             <Text style={styles.titleTxt}>Administrative Law</Text>

                    <FlatList
                        style={{ marginTop: 20,}}
                        data={this.state.data}
                        renderItem={({item}) => this._renderItem(item) }
                        keyExtractor={(index) => index.toString()}
                    />

            </View>
        );
      }
    }

标签： react-nativereact-native-flatlistreact-native-stylesheet

Answer 1

从代码中删除平面列表：

用以下代码替换您的渲染方法：

     constructor(props) {
        super(props)
        this.state = {
            data: [{ law_practice_description: 'Administration  Administration' },
            { law_practice_description: 'Administration  Agency Prctice' },
            { law_practice_description: 'Administration  hearing and  appeals' },
            { law_practice_description: 'Administration  Administration' },
            { law_practice_description: 'Administration  Agency Prctice' },
            { law_practice_description: 'Administration  hearing and  appeals' },
            { law_practice_description: 'Administration  Administration' },
            { law_practice_description: 'Administration  Agency Prctice' },
            { law_practice_description: 'Administration  hearing and  appeals' }],
        };
    }

     render() {
        let str = ''
        this.state.data.map((item, index) => {
             if (index == 0) {
                str = item.law_practice_description
             } else {
                str = str + ', ' + item.law_practice_description
             }
        })
        return (
            <View style={{ flex: 1 }} >
                <Text style={styles.titleTxt}>Administrative Law</Text>
                <Text style={{ fontSize: 16, color: 'black', }}>
                    {str}
                </Text>
            </ View>
        );
    }