React Native: コンポーネントで遷移したい

3181 ワード
reactnative reactnative テキストリンク

React Nativeで画面遷移するときは、navigationを使います
別の画面に遷移したいときは、画面のpropsに{ navigation }を渡して、navigation.navigate('AnotherScreen')のようにして遷移させます

が、これができるのはscreens配下にある画面だけで、コンポーネントではできません

コンポーネントの中から画面遷移を呼び出したいときは、react-nativeのwithNavigation関数を使います

手順

  1. import する
  2. export するときに withNavigation を使う

サンプル


import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { withNavigation } from 'react-navigation'; // ここ大事

const MyComponent = ({ navigation }) => {
  return (
    <View>
      <TouchableOpacity onPress={() => { navigation.navigate('MyScreen') }}>
         <Text>遷移するよ</Text>
      </TouchableOpacity>
    </View>
  )
}

export default withNavigation(MyComponent); // ここ大事

参考

Traitsテクノロジーの初探査
macはpipでnumpy,scipy,scikit-learnをインストールします