如何在 react native 中使用 gridview 构建主屏幕？

Question

我需要在 react-native 中构建一个带有网格视图的主屏幕。该网格视图应包含四个图像按钮。每个图像按钮应重定向到不同的页面。我正在使用 react-native-super-grid 包。

Answer 1

如果你只需要 4 个图像按钮比不需要制作复杂的网格。仅使用以下代码，如果您需要复杂的网格，请使用此 YouTube 视频link 以获得更好的理解。

    import React, { Component } from 'react';
import { AppRegistry, View,Image } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, }}>
         <View style={{flex: 1, flexDirection: 'row', }}>
        <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{flex:1}} />
        <Image source={{uri: 'https://cdn-images-1.medium.com/max/512/1*qUlxDdY3T-rDtJ4LhLGkEg.png'}}
       style={{flex:1}} />

      </View>
  <View style={{flex: 1, flexDirection: 'row', }}>
      <Image source={{uri: 'https://rawgit.com/gorangajic/react-icons/master/react-icons.svg'}}
       style={{flex:1}} />

        <Image  source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{flex:1}} />

      </View>
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

如果需要更多讨论，请告诉我

Answer 2

这是根据用户包的代码。

RenderItem函数是循环等工作。

当您将 4 个对象放入 section 数组时，RenderItem 将循环 4 次。

export default class App extends React.Component {

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

                <Image style={styles.img} source={require('./assets/3.jpg')} />
                <SuperGridSectionList
                    itemDimension={130}

                    sections={[
                        {
                            // all your style and data will be here according to your grid package
                            data: [

                                { name: '1' }, { name: '2' },
                                { name: '3' }, { name: '4' },

                            ]
                        }
                    ]}

                    style={styles.gridView}
                    renderItem={({ item }) => (
                        <View style={styles.buttonContainer}>

                            <TouchableOpacity style={styles.button} onPress={() => { alert("clicked me") }}>
                                <Image source={require("./assets/set2.png")} />
                            </TouchableOpacity>

                        </View>

Answer 3

您可以安装“npm install react-native-super-grid”并试试这个。您可以更改 itemDimension 然后它将更改应在屏幕上显示的图标数量。这只是一个示例，您可以根据需要更改任何内容。

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  PixelRatio,
  Image
} from "react-native";
import { Container, Header, Content } from "native-base";
import GridView from "react-native-super-grid";

const buttons = [
  {
name: "test1",
image: require("./src/icons/test1.png"),
key: 1
  },
  {
name: "test2",
image: require("./src/icons/test2.png"),
key: 2
  },
  {
name: "test3",
image: require("./src/icons/test3.png"),
key: 3
  },
  {
name: "test4",
image: require("./src/icons/test4.png"),
key: 4
  },
];

class Home extends Component {

  constructor(props) {
    super(props);
  }

  onPress(){
  
  }
  render() {
    return (
      <Container style={styles.container}>
        <Content contentContainerStyle={styles.contentContainerStyle}>
          <GridView
            itemDimension={180}
            items={buttons}
            renderItem={item => (
              <View style={styles.gridCompenentContainer}>
                <TouchableOpacity
                  onPress={this.onPress.bind(this)}
                  activeOpacity={0.8}
                  style={styles.touchView}
                >
                  <Image
                    style={{ width: 60, height: 60 }}
                    source={item.image}
                  />
                </TouchableOpacity>
                <View style={styles.textView}>
                  <Text style={styles.text}>{item.name}                     </Text>
                </View>
              </View>
            )}
          />
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff"
  },
  contentContainerStyle: {
    backgroundColor: "#fff",
    justifyContent: "center"
  },
  gridCompenentContainer: {
    width: 160,
    height: 140,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  touchView: {
    width: 80,
    justifyContent: "center",
    alignItems: "center",
    height: 80,
    borderRadius: 40,
    backgroundColor: "#0099cc"
  },
  textView: {
    width: 140,
    height: 50,
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    width: 140,
    fontSize: 12,
    textAlign: "center",
    color: "#0099cc"
  }
});

export default Home;

Answer 4

thara### 请参考这里了解如何实现 react 导航或官方文档React Navigation。

您可以为按钮按下事件添加路由。喜欢

        
        
        onPress={() =>
          this.props.navigation.navigate('screen2');
        }

https://facebook.github.io/react-native/docs/navigation#react-navigation