在React Native中传递另一页上的值

Question

我正在努力将值从一个页面传递到另一页。我正在通过导航传递值。

我尝试了此代码

     this.props.navigation.navigate('welcome', 
      {JSON_ListView_Clicked_Item:this.state.email,}))
in parent class from which i'm sending.
     const { navigation } = this.props;
     const JSON_ListView_Clicked_Item = 
     navigation.getParam('JSON_ListView_Clicked_Item', 'NO-ID');
     <Text>JSON_ListView_Clicked_Item: 
    {JSON.stringify(JSON_ListView_Clicked_Item)}</Text>

这是我想要数据的第二类。

这是我的代码

this.state = { email: '', password: '', error: ''};
   firebase.auth()
   .signInWithEmailAndPassword(email, 
   password).then(this.onLoginSuccess.bind(this))
   .then(() => this.props.navigation.navigate('welcome', 
   {JSON_ListView_Clicked_Item:this.state.emai
l,}))

设置文本输入

<TextInput
      style={{height: 40,width:250,  borderRadius: 5  
     ,multiline:"true",borderColor: 'purple', 
      borderWidth: 2,
    }}
    value={this.state.email}
    secureTextEntry={false}
    onChangeText={email => this.setState({ email })}
    placeholder="email"
    onSubmitEditing={() => {
    this.focusNextField('Password');
    }}
    returnKeyType={ "next" }
    ref={ input => {
    this.inputs['email'] = input;
    }} 
    />

在第二类上设置文本输入以获取数据

renderComponent() {
   const { navigation } = this.props;
   const JSON_ListView_Clicked_Item = 
   navigation.getParam('JSON_ListView_Clicked_Item', 'NO-ID');
   if (this.state.loggedIn) {
   return (
    <View>
      <Text>JSON_ListView_Clicked_Item: 
   {JSON.stringify(JSON_ListView_Clicked_Item)}</Text>
   <Button
    title="Sign out"
    onPress={() => firebase.auth().signOut()} 
    />
    </View>
  );

我在第二页上获取空白数据。我只想填写电子邮件并单击按钮时，我在下一页上收到电子邮件

Answer 1

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'; // Version can be specified in package.json
class HomeScreen extends React.Component {

render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');
return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Details Screen</Text>
    <Text>itemId: {JSON.stringify(itemId)}</Text>
    <Text>otherParam: {JSON.stringify(otherParam)}</Text>
  </View>
);
  }
}

这是一个示例，您可以将数据传递到另一个页面，但首先执行以下步骤

1. 纱线添加react-nvigation
2. 纱线添加反应式手持手机
3. 反应链接反应态handler

您也可以在2页之后访问

1. https://reaectnavigation.org/docs/en/getting-started.html->用于安装导航
2. https://reaectnavigation.org/docs/en/params.html->用于传递数据

Answer 2

发送者

       `this.props.navigation.navigate('Details', {
          itemId: 86,
          otherParam: 'anything you want here',
        });`

接收者

const { navigation } = this.props;
const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value');

在此处查看文档