react-native - 反応ネイティブでグリッドビューを使用してホーム画面を作成するには?

Question

反応ネイティブでグリッド ビューのホーム画面を作成する必要があります。そして、そのグリッド ビューには 4 つの画像ボタンが含まれている必要があります。各画像ボタンは、異なるページにリダイレクトする必要があります。react-native-super-grid パッケージを使用しています。

Answer 1

複雑なグリッドを作成する必要がない場合よりも、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);

さらに議論が必要な場合はお知らせください