React Native最后一个单元格中的collectionView占100%的宽度,如何停止

时间:2018-10-12 09:22:46

标签: react-native binding grid

在React Native中,我正在尝试创建一个Grid单元。问题是,当单元格为1时,它需要100%的宽度。我需要所有单元格的宽度都相等。如果单元格是一个或多个,则无需更改宽度。这是我的代码和屏幕截图,请参阅最后一个单元格宽度。

  render() {
        let imageURL = "https://randomuser.me/api/portraits/"
        let partofURL = "women/"
        return (
            <Container>
                <Header>
                </Header>
                <Content padder>
                <FlatList
                        data={this.state.ary_data}
                        numColumns={3}
                        itemWidth={150}
                        renderItem={({ item }) => (
                       <View style={{
                                flex: 1, margin: 5,
                                backgroundColor: '#ddd', borderColor: '#000000',
                                borderWidth: 1,
                                height: 130

                            }} >
                                <Grid> 
                                    <TouchableOpacity onPress={() =>this.didselectoncell(item.id)}>
                                    <Row style={{ height: '20%' }} >
                                        <Text>name:{item.name}</Text>
                                    </Row>
                                    <Row style={{ height: '20%' }}>
                                        <Text style={{textAlign:'center',width:'100%'}}>Detail:{item.detail}</Text>
                                    </Row>
                                    <Row >
                                        <Image
                                            style={{ width: 70, height: 70,
                                                backgroundColor:'#000000',
                                                marginLeft:'auto',
                                                marginRight:'auto' }}
                                            source={{ uri:  imageURL + partofURL + item.id + '.jpg' }}>
                                        </Image>
                                    </Row>
                                    </TouchableOpacity>
                                </Grid>
                            </View>
                        )}
                    refreshing={this.state.refreshing}/>
                </Content>
            </Container>
        );
    }
}

enter image description here

0 个答案:

没有答案