React Native Navigation

create app

react-native init NaviTest

test

react-native run-ios

lib install

1 Install react-native-navigation latest stable version.

yarn add react-native-navigation@latest

2 Add ReactNativeNavigation.xcodeproj

以下をXCodeのライブラリに追加

./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj

3 Build Phasesに追加

Build Phasesに追加

In Xcode, in Project Navigator (left pane), click on your project (top), then click on your target row (on the "project and targets list", which is on the left column of the right pane) and select the Build Phases tab (right pane). In the

4 Build Settings

Build Settingsを選択
Allを選んだのち、検索BOXに Header Search を入力　

Header Search Pathsの行をダブルクリック、表示された領域に以下を入力
$(SRCROOT)/../node_modules/react-native-navigation/ios

5 In Xcode, you will need to edit this file: AppDelegate.m

Replace @"index.ios" with @"index"

ここはすでになってれば必要ない

ソース変更

srcフォルダ作成

./src/app.js作成

import { Navigation } from 'react-native-navigation';

import { registerScreens } from './screens';

registerScreens(); // this is where you register all of your app's screens

// start the app
Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'example.FirstTabScreen', // this is a registered name for a screen
      icon: require('../img/one.png'),
      selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Screen One'
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]
});

screensフォルダ作成

index.jsを作成

import { Navigation } from 'react-native-navigation';

import FirstTabScreen from './FirstTabScreen';
import SecondTabScreen from './SecondTabScreen';
import PushedScreen from './PushedScreen';

// register all screens of the app (including internal ones)
export function registerScreens() {
  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
}

結果

どうやっても落ちる
うまくいかなさすぎて諦めた

いつか再挑戦します。