react-native - ナビゲーター ポップの React Native Pass プロパティ

Question

反応ネイティブ アプリで NavigatorIOS を使用しています。前のルートに戻るときにいくつかのプロパティを渡したいです。

例: 私はフォームページにいます。データを提出したら、前のルートに戻って、提出されたデータに基づいて何かをしたい

どうすればいいですか？

Answer 1

新しいルートをプッシュし、前のルートにポップする前にフォーム データでそれを呼び出すときに、ナビゲーター プロップにコールバック関数を渡すことができますか?

Answer 2

pop の前にコールバックを使用する方法を示すコード サンプル。これは NavigatorIOS ではなく Navigator 専用ですが、同様のコードを適用することもできます。

Page1 と Page2 があります。Page1 から Page2 にプッシュしてから、Page1 に戻ります。Page1 でいくつかのコードをトリガーする Page2 からのコールバック関数を渡す必要があり、その後で初めて Page1 に戻ります。

ページ 1 内 -

_goToPage2: function() {
  this.props.navigator.push({
    component: Page2,
    sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
    title: 'hey',
    callback: this.callbackFunction,
  })
},

callbackFunction: function(args) {
  //do something
  console.log(args)
},

ページ 2 で -

_backToPage1: function() {
  this.props.route.callback(args);
  this.props.navigator.pop();
},

関数「callbackFunction」は「pop」の前に呼び出されます。NavigatorIOS の場合、「passProps」で同じコールバックを実行する必要があります。このコールバックに引数を渡すこともできます。それが役に立てば幸い。

Answer 3

AsyncStorageを使用し、子 Component に値を保存してから、navigator.pop()を呼び出すことができます。

AsyncStorage.setItem('postsReload','true');
this.props.navigator.pop();

親コンポーネントでは、AsyncStorage から読み取ることができます。

async componentWillReceiveProps(nextProps) {
    const reload =  await AsyncStorage.getItem('postsReload');
    if (reload && reload=='true')
    {
       AsyncStorage.setItem('postsReload','false');
       //do something
    }
  }

Answer 4

NavigatorIOS の場合、replacePreviousAndPop() も使用できます。

コード：

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  AppRegistry,
  NavigatorIOS
} = React;

var MainApp = React.createClass({
  render: function() {
    return (
      <NavigatorIOS
          style={styles.mainContainer}
          initialRoute={{                   
            component: FirstScreen,
            title: 'First Screen',
            passProps: { text: ' ...' },
        }}
      />
    );
  },
});

var FirstScreen = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.helloText}>
              Hello {this.props.text}
        </Text>
        <TouchableOpacity 
            style={styles.changeButton} onPress={this.gotoSecondScreen}>
            <Text>Click to change</Text>
        </TouchableOpacity>      
      </View>
    );
  },
  gotoSecondScreen: function() {
        console.log("button pressed");
    this.props.navigator.push({
        title: "Second Screen",
      component: SecondScreen
    });
    },
});

var SecondScreen = React.createClass({
  render: function() {    
    return (
      <View style={styles.container}>
        <Text style={styles.helloText}>
          Select a greeting
        </Text>
        <TouchableOpacity 
            style={styles.changeButton} onPress={() => this.sayHello("World!")}>
            <Text>...World!</Text>
        </TouchableOpacity>
        <TouchableOpacity 
            style={styles.changeButton} onPress={() => this.sayHello("my Friend!")}>
            <Text>...my Friend!</Text>
        </TouchableOpacity>   
      </View>
    );
  },
  sayHello: function(greeting) {
        console.log("world button pressed");
    this.props.navigator.replacePreviousAndPop({
        title: "First Screen",
      component: FirstScreen,
      passProps: {text: greeting}
    });
    }
});


var styles = StyleSheet.create({
  mainContainer: {
        flex: 1,
        backgroundColor: "#eee"
  },
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 50,    
  },
  helloText: {
    fontSize: 16,
  },
  changeButton: {
    padding: 5,
    borderWidth: 1,
    borderColor: "blue",
    borderRadius: 4,
    marginTop: 20
  }
});



AppRegistry.registerComponent("TestApp", () => MainApp);

ここで実際の例を見つけることができます: https://rnplay.org/apps/JPWaPQ

それが役立つことを願っています！