Question

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

item | item
item | item

我看到这篇关于创建网格的文章，并且有效 - ListView grid in React Native

我无法理解如何使我的网格响应？如何将项目的大小设置为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"
}
});

结果将是：

<强>阐释：我使用的是使用组件Grid，Row，Col的react-native-easy-grid库创建了一个2X2布局。美妙的是你甚至不需要提及任何flexDirection属性，它只是起作用。然后，我将此组件传递给ListView元素的renderRow prop。

Answer 3

非常简单，使用弹性框，在渲染方法中，返回视图包含行，并使用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 4

尝试在两个项目上设置相同的弹性值，以便它们平等增长

React Native＆amp;响应式网格挠曲

4 个答案: