gpt4 book ai didi

android - Navigator 的 Passprops 等价物?

转载 作者:可可西里 更新时间:2023-11-01 04:41:08 26 4
gpt4 key购买 nike

我正在尝试从 NavigatorIOS 转换为 Navigator,但似乎无法弄清楚如何使 passprops 起作用。我试图将两个变量 LRA 和电子邮件传递到下一个场景,但我一直未定义。我对此很陌生,所以如果这是一个简单的问题,我很抱歉。到目前为止,这是我的代码,请随时给我任何其他您认为有问题的提示!

数据入口.js

  class DataEntry extends Component {
constructor(props) {
super(props);
this.state = {
emailString: 'default@gmail.com',
isLoading: false,
message: '',
mailerror: false,
lraerror: false
};
}

onEmailTextChanged(event) {
this.setState({ emailString: event.nativeEvent.text });
if (!validateEmail(this.state.emailString)){
this.emailError = "Please enter a valid email"
this.setState({error: true})
}
else{
this.emailError = ""
this.setState({error: false})
}
}

onLRATextChanged(event) {
this.setState({ LRAString: event.nativeEvent.text });
if (!isValidID(this.state.LRAString)){
this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters"
this.setState({error: true})
}
else{
this.LRAError = ""
this.setState({error: false})
}
}

gotoNext() {
var emailtext = this.state.emailString
var LRAtext = this.state.LRAString
console.log(emailtext)
this.props.navigator.push({
id: 'PasswordView',
name: 'Generated Password',
email: emailtext,
LRA: LRAtext
});
}

renderScene(route, navigator) {
var email = this.state.emailString
var LRA = this.state.LRAString
return (
<View style={styles.container}>
<Text style={styles.description}>
Please enter the email and LRA
</Text>

<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
value={this.state.emailString}
onChange={this.onEmailTextChanged.bind(this)}
placeholder='Enter Email'/>
</View>

<Text style={styles.error}>
{this.emailError}
</Text>

<View style={styles.flowRight}>
<TextInput
style={styles.searchInput}
value={this.state.LRAString}
onChange={this.onLRATextChanged.bind(this)}
placeholder='Enter LRA ID'/>
</View>

<Text style={styles.error}>
{this.LRAError}
</Text>


<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'
onPress={this.gotoNext.bind(this)}>
<Text style={styles.buttonText}>Retrieve Password</Text>
</TouchableHighlight>
<Text style={styles.description}>{this.state.message}</Text>
</View>
);
}
render() {
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
navigationBar={
<Navigator.NavigationBar style={{backgroundColor: '#48BBEC', alignItems: 'center'}}
routeMapper={NavigationBarRouteMapper} />
} />
);
}
}

var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
return null;
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return (
<TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
<Text style={{color: 'white', margin: 10, fontSize: 16}}>
Data Entry
</Text>
</TouchableOpacity>
);
}
};


module.exports = DataEntry;

最佳答案

您可能需要将导航器分离到它自己的组件中,然后您可以根据需要在导航器上分配所需的属性(在这种情况下, ...route.passProps 传播运算符是设置 passProps 以供使用的属性由导航器)。

我已经使用您的代码在 https://rnplay.org/apps/V_EhdA 设置了项目.

下面是我用来让它工作的代码。

'use strict';

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
Navigator,
TouchableHighlight
} = React;

function isValidID(string) {
return true
}

var Two = React.createClass({
render(){
return(
<View style={{marginTop:100}}>
<Text style={{fontSize:20}}>Hello From second component</Text>
<Text>id: {this.props.id}</Text>
<Text>name: {this.props.name}</Text>
</View>
)
}
})

var Main = React.createClass ({

getInitialState() {
return {
emailString: 'default@gmail.com',
isLoading: false,
message: '',
mailerror: false,
lraerror: false
}
},

onEmailTextChanged(event) {
this.setState({ emailString: event.nativeEvent.text });
if (!validateEmail(this.state.emailString)){
this.emailError = "Please enter a valid email"
this.setState({error: true})
}
else{
this.emailError = ""
this.setState({error: false})
}
},

onLRATextChanged(event) {
this.setState({ LRAString: event.nativeEvent.text });
if (!isValidID(this.state.LRAString)){
this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters"
this.setState({error: true})
}
else{
this.LRAError = ""
this.setState({error: false})
}
},

gotoNext() {
var emailtext = this.state.emailString
var LRAtext = this.state.LRAString
this.props.navigator.push({
passProps: {
id: 'PasswordView',
name: 'Generated Password',
email: this.state.emailstring,
LRA: LRAtext,
},
component: Two
});
},

render() {
var email = this.state.emailString
var LRA = this.state.LRAString
return (
<View style={styles.container}>
<Text style={styles.description}>
Please enter the email and LRA
</Text>

<View >
<TextInput
style={{height:40}}
value={this.state.emailString}
onChange={this.onEmailTextChanged.bind(this)}
placeholder='Enter Email'/>
</View>

<Text >
{this.emailError}
</Text>

<View >
<TextInput
style={{height:40}}
value={this.state.LRAString}
onChange={this.onLRATextChanged.bind(this)}
placeholder='Enter LRA ID'/>
</View>

<Text>
{this.LRAError}
</Text>

<TouchableHighlight style={{padding:30}}
underlayColor='#99d9f4'
onPress={ () => this.gotoNext() }>
<Text>Retrieve Password</Text>
</TouchableHighlight>

<Text >{this.state.message}</Text>
</View>
);
}
})

class DataEntry extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Navigator
configureScene={() => {
return Navigator.SceneConfigs.FloatFromRight;
}}
initialRoute={{name: 'ComponentName', component: Main, index: 0}}
renderScene={(route, navigator) => {
if (route.component) {
return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
}
}}

navigationBar={
<Navigator.NavigationBar
style={{backgroundColor: '#48BBEC', alignItems: 'center'}}
routeMapper={NavigationBarRouteMapper} />
} />
);
}
}

var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(index > 0) {
return (
<TouchableHighlight style={{marginTop: 10}} onPress={() => {
if (index > 0) {
navigator.pop();
}
}}>
<Text>Back</Text>
</TouchableHighlight>
)} else {
return null}
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return (
<TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
<Text style={{color: 'white', margin: 10, fontSize: 16}}>
Data Entry
</Text>
</TouchableOpacity>
);
}
};

var styles = StyleSheet.create({
container: {flex:1},
description: {flex:1}
})

AppRegistry.registerComponent('DataEntry', () => DataEntry);

关于android - Navigator 的 Passprops 等价物?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33763709/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com