Question

我是反应原生的初学者，我已经尝试了几天制作一个小应用程序。但我陷入了一件非常微不足道的事情。我正在尝试将用户的姓名从LoginPage传递给HomePage并显示。

到目前为止我尝试过的是

LoginPage.js

    'use strict';
     import React, {
     AppRegistry,
     Component,
     StyleSheet,
     Text,
     View,
     TouchableHighlight,
     TextInput,
     borderColor,
     borderRadius,
     borderWidth,
     color,
     secureTextEntry,
     Navigator
    } from 'react-native';

    var ToastAndroid = require('./Modules/ToastAndroid');
    var HomePage = require('./HomePage');

    class LoginPage extends Component{
       constructor(props){
         super(props);
         this.state = {
            userName : '',
            password:''
         }
       }
       render(){
         return(
            <Navigator renderScene={this.renderScene.bind(this)}
             navigator={this.props.navigator}
             navigationBar={
             <Navigator.NavigationBar
              style={{backgroundColor: '#246dd5', alignItems: 'center'}}
              routeMapper={NavigationBarRouteMapper} />
        }/>
       );
      }

renderScene(route, navigator){
  return(
    <View style={styles.container}>
      <View style={styles.titleView}>
        <Text style={styles.titleText}> Welcome!! Please Login</Text>
      </View>
      <TextInput style={styles.text_input}
        onChangeText={(text)=>this.setState({userName:text})}/>
      <TextInput secureTextEntry={true}
        style={styles.password_input}
        onChangeText={(pass)=>this.setState({password:pass})}/>
      <View style={styles.buttonView}>
        <TouchableHighlight
          style={styles.button}
          onPress={()=>this.login()}>
          <Text style={styles.instructions}>Login</Text>
        </TouchableHighlight>
      </View>
    </View>
  );
}
login(){
    ToastAndroid.show(this.state.userName , ToastAndroid.SHORT);
    this.props.navigator.push({
      //component: HomePage,
      id:'HomePage',
      passProps: {
        username: this.state.userName,
      },
      callbacks : this.onNext()
    })
  }

  onNext(){
    ToastAndroid.show(this.props.username , ToastAndroid.SHORT);
  }
}

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    return null;
  },
  RightButton(route, navigator, index, navState) {
    return null;
  },
  Title(route, navigator, index, navState) {
    return null;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  titleView: {
    backgroundColor:'#48afdb',
    paddingTop:30,
    paddingBottom:10,
    flexDirection:'row',
    alignItems: 'center'
  },
  titleText:{
    color:'#fff',
    textAlign:'center',
    fontWeight:'bold',
    flex:1,
    fontSize:20
  },
  text_input:{
    height :36,
    padding : 4,
    margin:5,
    fontSize:18,
    color:'#000',
  },
  password_input:{
    height :36,
    padding : 4,
    margin:5,
    fontSize:18,
    color:'#000',
  },
  button:{
    height : 36,
    flexDirection: 'row',
    backgroundColor:'#48afdb',
    alignItems: 'center',
    padding:5
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  buttonView:{
    paddingTop:30,
    paddingBottom:10,
    alignItems: 'center'
  }
});
module.exports = LoginPage;

HomePage.js

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  backgroundColor,
  ListView,
  Navigator,
  Image
} = React;

var Dimensions = require('Dimensions');
var WindowSize = Dimensions.get('window');

class HomePage extends Component{
  constructor(props){
    super(props);
    //this.props.username = props.username;
  }
  render(){
    return(
    <View style={styles.container}>
      <Text style={styles.text}>Welcome {this.props.username}</Text>
    </View>
  )}
}

var styles = StyleSheet.create({
  container: {
    flex: 1
  },
  text:{
    color:'#000',
    textAlign:'center',
    fontWeight:'bold',
    flex:1,
    fontSize:20
  },
});
module.exports = HomePage;

任何帮助将不胜感激。提前谢谢。

Answer 1

您可能需要将导航器的设置与此处的设置略有不同。尝试使用React.createElement设置renderScene方法以使其更易于配置：

renderScene={(route, navigator) => {
 return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
}}

然后，您可以将...route.passProps属性分配给组件。看看下面的passsProps属性。然后，您可以通过这种方式传递您需要的任何属性：

this.props.navigator.push({
    component: Home,
    passProps: {
      username: this.state.username,
    }
})

我已经设置了一个基本项目，其中包含您要完成的任务here，并且正在粘贴下面的应用程序代码。还有一个更全面的示例，其中包含navigationBar here。

'use strict';

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

var Login = React.createClass({

  getInitialState() {
    return {}
  },

  _goToHome() {
    this.props.navigator.push({
        component: Home,
        passProps: {
          username: this.state.username,
        }
    })
  },

  updateUsername(username) {
    this.setState({ username })
  },

    render() {
      return (
        <View style={styles.container}>
          <TouchableHighlight 
            onPress={ () => this._goToHome() }
            style={ styles.button }>
            <Text>
                GO TO ABOUT
            </Text>
          </TouchableHighlight>
          <TextInput 
            onChangeText={ (username) => this.updateUsername(username) }
            placeholder="Your Username"
            style={ styles.input }
          />
       </View>
     )
   }
})

var Home = React.createClass({
    render() {
      return (
        <View style={ styles.container }>
            <Text>Hello, { this.props.username }</Text>
        </View>
      )
    }
})

var App = React.createClass({  
  render() {
    return (
      <Navigator 
      initialRoute={{name: 'Login', component: Login, index: 0}}
      renderScene={(route, navigator) => {
        return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
      }} />
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60
  },
  button: {
    height: 60,
    backgroundColor: '#ededed',
    justifyContent: 'center', 
    alignItems: 'center'
  },
  input: {
    backgroundColor: '#f7f7f7',
    marginTop:10,
    borderWidth:1, 
    borderColor: '#ededed',
    height:60
  }
});

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

从视图传递值到视图 - React native

1 个答案: