如何在React Native中使用GridView构建主屏幕

Question

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

Answer 1

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

unique: true

让我知道是否需要更多讨论

Answer 2

您可以安装“ 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 3

以下是根据用户软件包提供的代码。

RenderItem函数是循环之类的工作。

当您在节中放置4个对象时，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 4

thara ###，请参阅此内容以了解如何实施反应导航或官方文档React Navigation。

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

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

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