Attached is what I'm trying to accomplish.
在第一个屏幕上,我需要在第二个屏幕上显示用户输入的文本输入值。
将数据传递到第三个屏幕很完美,但是我需要第一个屏幕中第二个屏幕的值。
下面是一些示例代码:Snack link
问题是我需要隐藏{this.props.navigation.state.params.UserWeight},直到在第二个屏幕上设置该值并将其发送回第一个屏幕为止,所以也许我需要一个if /否则声明?我已经尝试了一些方法,但是似乎没有任何效果。
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;
答案 0 :(得分:0)
您可以通过执行以下操作来有条件地显示文本。最好最好先检查参数是否存在,否则将无法定义
{this.props.navigation.state.params && this.props.navigation.state.params.UserWeight && (<Text style={styles.textStyle2}>
Weight = {this.props.navigation.state.params.UserWeight}
</Text>)}