React Native&Flex中的响应式网格

Question

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

item | item
item | item

我看到这篇关于创建网格的文章,它在React Native中有效 - ListView网格

我无法理解如何使我的网格响应？如何将项目的大小设置为50%？

我知道这是一种新语言,但我希望它可以有更详细的指南/文件.

Answer 1

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

父视图

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

儿童观(物品)

{ width: '50%' }

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

Answer 2

您可以使用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"
}
});

结果将是这样的：

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

Answer 3

尝试为两个项目设置相同的弹性值，以便它们均匀增长