使用 StackNavigator 将用户输入从第二个屏幕传递到第一个屏幕。

Question

Attached is what I'm trying to accomplish.

在第一个屏幕上我需要在第二个屏幕上显示用户输入的文本输入值。

将数据传递到第三个屏幕效果很好，但是我需要第一个屏幕中的第二个屏幕的值。

下面是一些示例代码：Snack link

问题是我需要一些方法来隐藏 {this.props.navigation.state.params.UserWeight} 直到在第二个屏幕上设置值并发送回第一个屏幕，所以也许我需要一个 if/else 语句？我尝试了一些东西，但似乎没有任何效果。

App.js

import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import AddWeightScreen from './AddWeight';

class TodayScreen extends Component {
  static navigationOptions =
    {
      title: 'Today'
    };

render() {

    return (
      <View style={styles.container}>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('Weight')}>

            // if no weight entered (default) display this text
            <Text style={styles.textStyle}>
              Go to Add Weight screen
            </Text>

            // else when user weight has been entered on the next screen display the result on this screen
            // i'm commenting out the object below because it isn't defined here by default and it throws an error, it gets defined in the next screen but i need to display it here
            <Text style={styles.textStyle2}>
            Weight =
            {this.props.navigation.state.params.UserWeight}
            </Text>

          </TouchableOpacity>

      </View>
    );
  }
}

export const Project = createStackNavigator(
  {
    Today: TodayScreen,
    Weight: AddWeightScreen, 
  });

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    backgroundColor: 'white'
  },
  textStyle: {
    color: '#0066cc',
    textAlign: 'center',
    fontSize: 20, 
    marginTop: 40,
  },
    textStyle2: {
    color: 'black',
    textAlign: 'center',
    fontSize: 20, 
    marginTop: 40,
  },

});

export default Project;

AddWeight.js

import React, { Component } from 'react';
import { StyleSheet, TextInput, View, TouchableOpacity, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class AddWeightScreen extends Component {
  static navigationOptions =
    {
      title: 'Add your Weight'
    };

  Send_Data_Function = () => {
    this.props.navigation.navigate('Today', {
      UserWeight: this.state.TextInput_Weight,
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput 
          style={styles.textInputStyle}
          placeholder="Enter your Weight"
          onChangeText={data => this.setState({ TextInput_Weight: data })} 
          autoFocus = {true}
          keyboardType={'numeric'}
        /> 

        <TouchableOpacity onPress={this.Send_Data_Function} style={styles.button} >
          <Text style={styles.buttonText}> Save </Text>
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    backgroundColor: 'white'
  },
  textInputStyle: {
    height: 30,
    width: '90%',
    borderWidth: 1,
    borderColor: 'gray',
    margin: 15,
    padding: 2
  },
  button: {
    width: '90%',
    height: 40,
    padding: 10,
    backgroundColor: '#0066cc',
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    fontWeight: '600'
  },
});

export default AddWeightScreen;

Answer 1

您可以通过执行以下操作来有条件地显示文本。可能最好先检查参数是否存在，否则它将是未定义的

 {this.props.navigation.state.params && this.props.navigation.state.params.UserWeight && (<Text style={styles.textStyle2}>
   Weight = {this.props.navigation.state.params.UserWeight}
 </Text>)}

使用 StackNavigator 将用户输入从第二个屏幕传递到第一个屏幕。

Passing user input from second screen to first screen with StackNavigator.

react-native

react-navigation

stack-navigator