React Native 和 Flex 中的响应式网格

Question

我要创建最简单的两列网格ListView

item | item
item | item

我看到了这篇关于创建网格的帖子，并且很有效 - ListView grid in React Native

我不明白如何让我的网格响应？ 如何将项目的大小设置为 50%？

我知道这是一种新语言，但我希望它可以有一些更详细的指南/文档。

Answer 1

尝试在这两个项目上设置相同的 flex 值，这样它们会平均增长

Answer 2

很简单，使用弹性盒子，在你的渲染方法返回视图包含行，并使用for循环放置数据。

const rowData=[];

render() {
    return <View style={styles.container}>{rowData}</View>;
}

for (let objectData of newArray) {
    rowData.push(this.renderRowView(objectData));
}

renderRowView(objectData) {
    return(
        <View style={styles.mainContainer}>
            <View style={styles.leftView}></View>
            <View style={styles.rightView}></View>
       </View>
   );
}

const styles = StyleSheet.create({
    mainContainer: {
        flex:1,
    },
    leftView: {
        flex:1,
    },
    rightView: {
        flex:1,
    }
});

我没有运行这段代码，但希望它对你有用！！！

Answer 3

您可以使用react-native-easy-grid 库轻松实现此目的。

由于它是 2X2 布局，您可以按照以下方式使用它。首先导入库

import {Grid,Row,Col} from 'react-native-easy-grid'

代码：

 export default class StackOverflow extends Component {
constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
        dataSource: ds.cloneWithRows(["item"])
    };
}

render() {
    return (
        <View style={{ flex: 1, padding: 50 }}>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={rowData => (
                    <Grid>
                        <Row style={styles.container}>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "yellow" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "green" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                        </Row>
                        <Row style={styles.container}>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "skyblue" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                            <Col
                                style={[
                                    styles.container,
                                    { backgroundColor: "orange" }
                                ]}
                            >
                                <Text>{rowData}</Text>
                            </Col>
                        </Row>
                    </Grid>
                )}
            />
        </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    alignItems: "center",
    justifyContent: "center"
}
});

结果是这样的：

说明： 我使用组件 Grid、Row、Col 使用 react-native-easy-grid 库创建了一个 2X2 布局。美妙之处在于您甚至无需提及任何 flexDirection 属性，它就可以工作。然后，我将此组件传递给 ListView 元素的 renderRow 属性。

Answer 4

我只需要这样做，我可以通过简单的反应视图和flexWrap 规则来解决它。

父视图

{ flex: 1, flexDirection: 'row', flexWrap: 'wrap'}

子视图（项目）

{ width: '50%' }

希望这可能对某人有所帮助！