Android 将值从一个视图传递到另一个视图-反应本机

我是react native的初学者，几天来我一直在尝试制作一个小应用程序。但我被困在一件非常琐碎的事情里。我正在尝试将用户名从

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;

“严格使用”；
进口反应{
评估学，
组成部分，
样式表，
文本，
看法
触控高光，
文本输入，
边框颜色，
边界半径，
边界宽度，
颜色
secureTextEntry，
领航员
}从“反应本机”；
变量ToastAndroid=需要（'./模块/ToastAndroid'）；
var HomePage=要求（'./主页'）；
类LoginPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”
}
}
render（）{
返回(
);
}
renderScene（路线、导航器）{
返回(
欢迎！！请登录
this.setState（{userName:text}）}/>
this.setState（{password:pass}）}/>
this.login（）}>
登录
);
}
登录（）{
ToastAndroid.show（this.state.userName，ToastAndroid.SHORT）；
这个是.props.navigator.push({
//组成部分：主页，
id:“主页”，
通行证：{
用户名：this.state.username，
},
回调：this.onNext（）
})
}
onNext（）{
ToastAndroid.show（this.props.username，ToastAndroid.SHORT）；
}
}
变量NavigationBarRouteMapper={
LeftButton（路线、导航器、索引、导航状态）{
返回null；
},
右按钮（路线、导航器、索引、导航状态）{
返回null；
},
标题（路线、导航器、索引、导航状态）{
返回null；
}
}
const styles=StyleSheet.create({
容器：{
弹性：1
},
标题视图：{
背景颜色：“#48afdb”，
paddingTop:30，
填充底部：10，
flexDirection:“行”，
对齐项目：“中心”
},
标题文字：{
颜色：“#fff”，
textAlign:“中心”，
字体权重：'粗体'，
弹性：1，
尺寸：20
},
文本输入：{
身高：36，
填充：4，
差额：5，
尺码：18，
颜色：“#000”，
},
密码输入：{
身高：36，
填充：4，
差额：5，
尺码：18，
颜色：“#000”，
},
按钮：{
身高：36，
flexDirection:'行'，
背景颜色：“#48afdb”，
对齐项目：“居中”，
填充：5
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
按钮视图：{
paddingTop:30，
填充底部：10，
对齐项目：“中心”
}
});
module.exports=登录页面；

主页.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;

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
组成部分，
样式表，
文本，
看法
触控高光，
背景色，
ListView，
领航员，
形象
}=反应；
变量维度=要求（“维度”）；
var WindowSize=Dimensions.get（'window'）；
类主页扩展组件{
建造师（道具）{
超级（道具）；
//this.props.username=props.username；
}
render（）{
返回(
欢迎{this.props.username}
)}
}
var styles=StyleSheet.create({
容器：{
弹性：1
},
正文：{
颜色：“#000”，
textAlign:“中心”，
字体权重：'粗体'，
弹性：1，
尺寸：20
},
});
module.exports=主页；

任何帮助都将不胜感激。

---

提前感谢。

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

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

然后您可以将

…route.passrops

属性分配给组件。请看下面的passsProps属性。然后，您可以通过以下方式传递所需的任何属性：

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

我已经建立了一个基本的项目与你试图完成的，我粘贴下面的应用程序的代码。还有一个更全面的导航栏示例

“严格使用”；
var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
领航员，
触控高光，
文本输入框
}=反应；
var Login=React.createClass({
getInitialState（）{
返回{}
},
_goToHome（）{
这个是.props.navigator.push({
组成部分：家庭，
通行证：{
用户名：this.state.username，
}
})
},
updateUsername（用户名）{
this.setState（{username}）
},
render（）{
返回(
这个。_goToHome（）}
style={styles.button}>
着手
this.updateUsername（用户名）}
占位符=“您的用户名”
style={styles.input}
/>
)
}
})
var Home=React.createClass({
render（）{
返回(
你好，{this.props.username}
)
}
})
var App=React.createClass（{
render（）{
返回(
{
返回React.createElement（route.component，{…this.props，..route.passProps，navigator，route}）；
}} />
);
}
});
var styles=StyleSheet.create({
容器：{
弹性：1，
玛金托普：60
},
按钮：{
身高：60，
背景颜色：“#ededed”，
为内容辩护：“中心”，
对齐项目：“中心”
},
输入：{
背景颜色：“#f7f7f7”，
玛金托普：10，
边框宽度：1，
边框颜色：“#ededed”，
身高：60
}
});
AppRegistry.registerComponent（'App'，（）=>App）；

谢谢您的回复。。我试试这个^_^

'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);