react-native - 使用 StackNavigator 将用户输入从第二个屏幕传递到第一个屏幕。
问题描述
在第一个屏幕上,我需要在第二个屏幕上显示用户输入的文本输入值。
将数据传递到第三个屏幕效果很好,但是我需要第一个屏幕中第二个屏幕的值。
下面是一些示例代码:小吃链接
问题是我需要一些方法来隐藏 {this.props.navigation.state.params.UserWeight} 直到在第二个屏幕上设置值并发送回第一个屏幕,所以也许我需要一个 if/else 语句?我尝试了一些东西,但似乎没有任何效果。
应用程序.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;
解决方案
您可以通过执行以下操作有条件地显示文本。可能最好先检查参数是否存在,否则它将是未定义的
{this.props.navigation.state.params && this.props.navigation.state.params.UserWeight && (<Text style={styles.textStyle2}>
Weight = {this.props.navigation.state.params.UserWeight}
</Text>)}
推荐阅读
- google-apps-script - 将 Google Admin SDK Reports API 与 Google 应用制作工具一起使用
- c# - EditorTemplate ASP MVC 5 的自定义验证
- docker - 不同容器的相同泊坞窗图像
- javascript - 如何将另一个选项卡动态添加到引导选项卡
- java - Vert.x HttpClient 不会重新连接到重新启动的服务器
- join - 按一列合并两个文件 - awk
- angular - Chrome Web App Manifest 保留查询参数
- karate - 如何在空手道框架中断言子字符串
- vba - 如何从 csv 中删除表情符号
- wpf - mvvm 更新计算字段