Как создать домашний экран с помощью gridview в React Native?

Если вам нужно всего 4 кнопки изображения, то не нужно делать сложную сетку. Используйте только приведенный ниже код, и если вам нужен сложный пояс, чем используйте это видео YouTube ссылка на сайт для лучшего понимания.

    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);

Сообщите мне, если потребуется дополнительное обсуждение

Вы можете установить «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;

Вот код согласно пользовательскому пакету.

Функция 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>

thara ### обратитесь к этому, чтобы узнать, как реализовать реагирующую навигацию или официальную документацию Реагировать на навигацию.

Вы можете добавить маршрут для события нажатия кнопки. как

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

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