React native 未显示平面列表（反应本机）

从我的json中根本不显示平面列表

我试着从其他人那里复制示例代码，从json生成平面列表，但这对我不起作用

这里是我尝试的链接

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、文本输入、TouchableOpacity、文本、图像、平面列表、维度}；
常数数据=[
{id:'a'，value:'a'}，
{id:'b'，value:'b'}，
{id:'c'，value:'c'}，
{id:'d'，value:'d'}，
{id:'e'，value:'e'}，
{id:'f'，value:'f'}，
];
常数numColumns=3；
const size=Dimensions.get（'window'）。宽度/numColumns；
类应用程序扩展组件{
建造师（道具）{
//构造函数设置默认状态
超级（道具）；
此.state={
关键字：“”，
};
}
render（）{
返回(
'tes'}>
this.setState（{keyword}）}
/>
试验
(
{item.value}
)}
keyExtractor={item=>item.id}
numColumns={numColumns}/>
);
}
}
const styles=StyleSheet.create({
itemContainer：{
宽度：大小，
高度：尺寸，
},
项目：{
弹性：1，
差额：3，
背景颜色：“#97ff49”，
},
反对：{
弹性：1，
//为内容辩护：“中心”，
对齐项目：“居中”，
玛金托普：15
},
搜索输入：{
边框宽度：0.8，
边框颜色：'#234q42'，
marginHorizontal:15，
水平方向：15，
玛金托普：10，
背景颜色：“#fff”，
边界半径：4，
尺寸：12，
flexDirection:“行”，
},
textC:{
尺寸：17，
fontWeight:'粗体'，
玛金托普：5，
marginBottom:5，
颜色：“aee314”
}
});
导出默认应用程序；

---

有人能帮我解决这个问题吗？我只是想显示json中的平面列表，但为什么它根本不显示？

在渲染内部，您忘记提供父视图

style={{flex:1}

使所有内容都在一行上渲染，因为它不占用渲染内部的空间

您忘记提供父视图

style={{flex:1}

使所有内容都在一行上渲染，因为它不占用空间

显示屏幕的代码，没有代码我们不能说有什么问题。显示屏幕的代码，没有代码我们不能说有什么问题。

import React, { Component } from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, Image, FlatList, Dimensions} from 'react-native';



const data = [
    {id: 'a', value: 'A'},
    {id: 'b', value: 'B'},
    {id: 'c', value: 'C'},
    {id: 'd', value: 'D'},
    {id: 'e', value: 'E'},
    {id: 'f', value: 'F'},
];
const numColumns = 3;
const size = Dimensions.get('window').width/numColumns;

class App extends Component {
    constructor(props) {
        //constructor to set default state
        super(props);
        this.state = {
            keyword: '',
        };
    }
    render() {
        return (
            <View>

                <View style={styles.searchInput}>
                    <TouchableOpacity style={{padding:15,right:0,position:'absolute'}} onPress={()=>'tes'}>

                    </TouchableOpacity>
                    <TextInput
                        placeholder="Search..."
                        style={{paddingRight:50}}
                        onChangeText={keyword => this.setState({ keyword })}
                    />
                </View>
                <View style={styles.con}>
                    <Text style={styles.textC}>Test</Text>
                    <FlatList
                        data={data}
                        renderItem={({item}) => (
                            <View style={styles.itemContainer}>
                                <Text style={styles.item}>{item.value}</Text>
                            </View>
                        )}
                        keyExtractor={item => item.id}
                        numColumns={numColumns} />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    itemContainer: {
        width: size,
        height: size,
    },
    item: {
        flex: 1,
        margin: 3,
        backgroundColor: '#97ff49',
    },
    con: {
        flex: 1,
        //justifyContent: 'center',
        alignItems: 'center',
        marginTop: 15
    },
    searchInput: {
        borderWidth:0.8,
        borderColor: '#234q42',
        marginHorizontal:15,
        paddingHorizontal:15,
        marginTop:10,
        backgroundColor:'#fff',
        borderRadius:4,
        fontSize: 12,
        flexDirection:'row',
    },
    textC: {
        fontSize: 17,
        fontWeight: 'bold',
        marginTop: 5,
        marginBottom: 5,
        color: 'aee314'
    }
});


export default App;