Как построить домашний экран, используя gridview в реагировать родной? - PullRequest
Новая
       10

Как построить домашний экран, используя gridview в реагировать родной?

0 голосов
/ 27 августа 2018

Мне нужно построить домашний экран с видом на сетку в реагирующем.И этот вид сетки должен содержать четыре кнопки изображения.Каждая кнопка с изображением должна перенаправлять на разные страницы.Я использую пакет response-native-super-grid.

Ответы [ 4 ]

0 голосов
/ 27 августа 2018

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

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

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

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

0 голосов
/ 27 августа 2018

Вы можете установить «npm install response-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;
0 голосов
/ 27 августа 2018

Вот код в соответствии с пользовательским пакетом.

Функция 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>
0 голосов
/ 27 августа 2018

Если вам нужно всего 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);

Дайте мне знать, если вам нужно больше обсуждений

...