从视图来查看pass值 - 本土作出反应 [英] Pass Value from view to view - React native

问题描述

我是一个初学者在本土的反应，我一直在努力了好几天做一个小的应用程序。但我被困在一个很琐碎的事情。我想从 LoginPage 用户名传递给首页并显示它。

I am a beginner in react native , I have been trying for several days to make a small app. But I was stuck in a very trivial thing. I am trying to pass the user's name from LoginPage to HomePageand display it.

这就是我试图到目前为止

That's what I have tried so far

LoginPage.js

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

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;

任何帮助将AP preciated。
先谢谢了。

Any help will be appreciated. Thanks in advance.

推荐答案

您可能需要设置您的导航有点不同比你在这里。尝试建立您的renderScene方法是通过使用更多的React.createElement配置：

You may need to set up your navigator a little differently than you have it here. Try setting up your renderScene method to be more configurable by using React.createElement:

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

然后，您可以指定 ... route.passProps 属性的组件。看看下面的passsProps财产。然后，你可以通过你需要这样任何属性：

Then you can assign the ...route.passProps property to component. Take a look at the passsProps property below. You can then pass whatever properties you need to in this way:

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

我已经建立了与你试图完成这里，和我粘贴的基础工程在code下面的应用程序。还有与导航栏<一个更加融为一体prehensive例子href=\"http://stackoverflow.com/questions/33830493/react-native-navigator/33831700#33831700\">here.

I've set up a basic project with what you were trying to accomplish here, and am pasting the code for the app below. There's also a more comprehensive example with 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);

这篇关于从视图来查看pass值 - 本土作出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！