web-dev-qa-db-ja.com

React nativeのページ間でデータを渡す

私はネイティブに反応するのが初めてで、次のことにこだわっています。

以下のコードを使用してナビゲーションを実行しています（アラートビューボタンをクリックしたとき）。

const {navigation} = this.props.navigation;
…
.
.
 { text: 'Done', onPress:() => {
              navigate.Push(HomeScreen);}

React nativeで別のページにデータを渡すにはどうすればよいですか？パラメーターをグローバルに宣言して、単に割り当てることができますか？

これを実行する正しい方法は何ですか？

react-nativenavigation
8
Saranjith

react-navigationのページ間でデータを渡すことは、かなり簡単です。ドキュメントで明確に説明されています here

完全を期すために、1つの画面から別の画面に移動して画面間で値を渡すことができる小さなアプリを作成しましょう。この例では文字列を渡すだけですが、数値、オブジェクト、配列を渡すことは可能です。

App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    )
  }
}

MainNavigation.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);

Screen1.jsおよびScreen2.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

ここには4つのファイルがあります。 App.jsをインポートするMainNavigation.js。 MainNavigation.jsは、Screen1.jsとScreen2.jsの2つの画面でStackNavigatorを設定します。 Screen1は、StackNavigatorの初期画面として設定されています。

画面間を移動する

を使用してScreen1からScreen2に移動できます

this.props.navigation.navigate('Screen2');

を使用してScreen1からScreen2に戻ることができます

this.props.navigation.goBack();

したがって、Screen1のコードは

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title={'Go to screen 2'} onPress={() => this.props.navigation.navigate('Screen2')} />
      </View>
    )
  }
}

そして、Screen2のコードは次のようになります。

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title={'Go back'} onPress={() => this.props.navigation.goBack()} />
      </View>
    )
  }
}

これで、Screen1とScreen2の間を移動できます

Screen1からScreen2に値を送信しています

Screen1とScreen2の間で値を送信するには、2つの手順が必要です。最初に送信する必要があり、次にキャプチャする必要があります。

値を2番目のパラメーターとして渡すことで送信できます。テキスト値がオブジェクトにどのように含まれているかに注目してください。

this.props.navigation.navigate('Screen2', {text: 'Hello from Screen 1' });

そして、以下を実行することでScreen2にそれをキャプチャできます。getParamsの最初の値はkeyで、2番目の値はデフォルト値です。

const text = this.props.navigation.getParams('text','nothing sent');

したがって、Screen1は次のようになります。

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button 
         title={'Go to screen 2'} 
         onPress={() => this.props.navigation.navigate('Screen2',  { 
           text: 'Hello from screen 1' 
         })} />
      </View>
    )
  }
}

そして、Screen2のコードは次のようになります。

export default class Screen extends React.Component {
  render() {
    const text =  this.props.navigation.getParam('text', 'nothing sent')
    return (
      <View style={styles.container}>
        <Text>{text}</Text>
        <Button 
         title={'Go back'} 
         onPress={() => this.props.navigation.goBack()} />
      </View>
    )
  }
}

Screen2からScreen1に値を送信する

Screen2からScreen1に値を送信する最も簡単な方法は、Screen2の状態を更新するScreen1からScreen1に関数を渡すことです。送信したい値で

したがって、Screen1をこのように更新できます。最初に状態の初期値を設定します。次に、状態を更新する関数を作成します。次に、その関数をパラメーターとして渡します。 TextコンポーネントのScreen2から取得した値を表示します。

export default class Screen1 extends React.Component {

  state = {
    value: ''
  }

  receivedValue = (value) => {
    this.setState({value})
  }

  render() {
    return (
      <View style={styles.container}>
        <Button 
          title={'Go to screen 2'} 
          onPress={() => this.props.navigation.navigate('Screen2', {
            text: 'Hello from Screen 1', 
            receivedValue: this.receivedValue } 
            )} />
          <Text>{this.state.value}</Text>
      </View>
    )
  }
}

先ほどreceivedValueを渡したのと同じ方法で関数textを渡しています。

ここで、Screen2の値をキャプチャする必要があります。これは、以前と同様の方法で行います。デフォルトを設定することを忘れないで、getParamを使用して値を取得します。次に、戻るボタンを押すと、最初にreceivedValue関数を呼び出すように更新し、送信するテキストを渡しますバック。

export default class Screen2 extends React.Component {

  render () {
    const text =  this.props.navigation.getParam('text', 'nothing sent');
    const receivedValue = this.props.navigation.getParam('receivedValue', () => {});
    return (
      <View style={styles.container}>
        <Button 
          title={'Go back'} 
          onPress={() => {
            receivedValue('Hello from screen 2')
            this.props.navigation.goBack()
          }} />
          <Text>{text}</Text>
      </View>
    );
  }
}

getParamを使用する代わり

getParamメソッドを使用せずに、値に直接アクセスすることもできます。その場合、デフォルト値を設定するオプションはありません。しかし、それはできます。

Screen2では、次のことができます。

const text = this.props.navigation.state.params.text;
const receivedValue = this.props.navigation.state.params.receivedValue;

ライフサイクルイベントの値のキャプチャ（Screen1からScreen2）

react-navigationを使用すると、ライフサイクルイベントを使用して値をキャプチャできます。これを行うにはいくつかの方法があります。 NavigationEventsを使用するか、componentDidMountに設定されたリスナーを使用できます

NavigationEventsを使用して設定する方法は次のとおりです。

import React, {Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { NavigationEvents } from 'react-navigation'; // you must import this


export default class Screen2 extends React.Component {

    state = {
      text: 'nothing passed'
    }

  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }


  render() {
    return (
      <View style={styles.container}>
        <NavigationEvents
        onWillFocus={this.willFocusAction}

        />
        <Text>Screen 2</Text>
        <Text>{this.state.text}</Text>
      </View>
    )
  }
}

componentDidMountのリスナーを使用して行う方法は次のとおりです。

export default class Screen2 extends React.Component {

  componentDidMount () {
    // we add the listener here
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocusAction);
  }

  componentWillUmount () {
    // we remove the listener here
    this.willFocusSubscription.remove()
  }

  state = {
    text: 'nothing passed'
  }

  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 2</Text>
        <Text>{this.state.text}</Text>
      </View>
    )
  }
}

コンポーネントを介してナビゲーションを渡す

上記の例では、画面から画面に値を渡しました。画面上にコンポーネントがあり、そこから移動したい場合があります。コンポーネントがナビゲーターの一部である画面内で使用されている限り、それを行うことができます。

最初のテンプレートから始めて、2つのボタンを作成する場合。 1つは機能コンポーネントで、もう1つはReactコンポーネントです。

MyButton.js

// this is a functional component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

export const MyButton = ({navigation, value, title}) => {
  return (
    <TouchableOpacity onPress={() => navigation.navigate('Screen2', { value })}>
      <View style={styles.buttonStyle}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  }
});

MyOtherButton.js

// this is a React component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

export default class MyOtherButton extends React.Component {

  render() {
    const { navigation, value, title } = this.props; 
    return (
    <TouchableOpacity onPress={() => navigation.navigate('Screen2', { value })}>
      <View style={styles.buttonStyle}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'yellow'
  }
});

コンポーネントのタイプに関係なく、ナビゲーションは小道具であることに注意してください。コンポーネントにナビゲーションを渡す必要があります。そうしないと機能しません。

Screen1.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import { MyButton } from './MyButton';        
import MyOtherButton from './MyOtherButton';  

export default class Screen1 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 1</Text>
        <MyButton 
          title={'Press my button'} 
          navigation={this.props.navigation}
          value={'this is a string passed using MyButton'}
        />
        <MyOtherButton 
          title={'Press my other button'} 
          navigation={this.props.navigation}
          value={'this is a string passed using MyOtherButton'}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

StackNavigatorに含まれているScreen1.jsには、this.props.navigationへのアクセス権があります。これをコンポーネントに小道具として渡すことができます。コンポーネントでそれを使用する限り、コンポーネント独自の機能を使用してナビゲートできる必要があります。

<MyButton 
  title={'Press my button'} 
  navigation={this.props.navigation} // pass the navigation here
  value={'this is a string passed using MyButton'} 
/>

おやつ

10
Andrew

1）ホーム画面：-

初期化：-

constructor(props) {
    super(props);
    this.navigate = this.props.navigation.navigate; }

送信：-

this.navigate("DetailScreen", {
            name: "Detail Screen",
            about:"This is Details Screen Page"
          });

2）詳細画面：-

初期化：-

constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
}

データの取得：-

console.log(this.params.name);
console.log(this.params.about);
7
omprakash8080
const {navigate} = this.props.navigation;

…
.
.
 { text: 'Done', onPress:() => {
              navigate('homeScreen',...params);}

次のようなパラメータを取得できます

const {params} = this.props.navigation.state
4
Manzoor Samad

以下のように react-navigation で簡単にパラメーターを送受信できます

パラメータを送信：

{
   text: 'Done',
   onPress: () => {
       this.props.navigation.navigate(
           HomeScreen,
           {param1: 'value1', param2: 'value2'}
       );
   }
}

HomeScreenのparamsを取得：

const { navigation } = this.props;
var param1 = navigation.getParam('param1', 'NO-VALUE');
var param2 = navigation.getParam('param2', 'NO-VALUE');

'NO-VALUE'は、必要なパラメーターがない場合のデフォルト値です

3
SiSa

私はあなたが反応ナビゲーションを使用していると仮定しています。したがって、反応ナビゲーションでは、データを2つの部分に渡すことができます。

  1. Paramsをnavigation.navigate関数の2番目のパラメーターとしてオブジェクトに入れて、ルートに渡します。

    this.props.navigation.navigate('RouteName', { /* params go here */ })

  2. 画面コンポーネントのパラメーターを読み取ります。

    this.props.navigation.getParam(paramName, someDefaultValue)

    アラートボタン

        <Button
      title="Alert View"
      onPress={() => {
        this.props.navigation.navigate('alerts', {
          itemId: 86,
          otherParam: 'anything you want here',
        });
      }}
    />

画面：

const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value')
3
Prathmesh Kadam