Чтобы передать значения на другой странице в реагировать на родной - PullRequest
Новая
       50

Чтобы передать значения на другой странице в реагировать на родной

0 голосов
/ 25 июня 2019

Я работаю над передачей значений с одной страницы на другую.Я передаю значения с помощью навигации.

Я попробовал этот код 

     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>
  );

Я получаю пустые данные на второмстр.Я просто хочу, чтобы при заполнении электронного письма и нажатии на кнопку я получил электронное письмо на следующей странице

Ответы [ 2 ]

1 голос
/ 01 июля 2019 
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. пряжа с реактивной навигацией
  2. пряжа добавляет обработчик реакции-нативного жеста
  3. реакция-нативная ссылка реакция-нативный-жест-обработчик

Вы также можете посетить следующие 2 страницы

  1. https://reactnavigation.org/docs/en/getting-started.html -> ДЛЯ УСТАНОВКИ НАВИГАЦИИ
  2. https://reactnavigation.org/docs/en/params.html -> ДЛЯ ПЕРЕДАЧИ ДАННЫХ
0 голосов
/ 25 июня 2019

отправитель 

       `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');

проверить документацию здесь

...