我是新来回应本机.我需要简单的方案在这里通过点击按钮转到新的屏幕.
React native按钮单击移动到另一个屏幕
我试过这个
React native按钮单击移动到另一个屏幕
我试过这个
<TouchableHighlight onPress={this.register} style={styles.button1}> <Text style={styles.buttontext1}> Registration </Text> </TouchableHighlight> register(){ //What should I write in here to go to a new layout. }
解决方法
例:
将下一个代码写入index.ios.js
'use strict'; import React,{ AppRegistry,Component,StyleSheet,View,NavigatorIOS } from 'react-native'; var rootPage = require('./root.IOS') var client = React.createClass({ render() { return ( <NavigatorIOS style = {styles.container} initialRoute={{ title: "Root",navigationBarHidden: true,component:rootPage }}/> ); } }); const styles = StyleSheet.create({ container: { flex: 1,} }); AppRegistry.registerComponent('client',() => client);
在文件“root.IOS.js”
'use strict'; import React,{ StyleSheet,TouchableHighlight,Text,Dimensions,} from 'react-native'; var NextPage = require('./nextPage.IOS.js'); var rootPage = React.createClass({ goDerper: function() { this.props.navigator.push({ title: 'nextPage',component: NextPage,passProps: {myElement: 'text'} }); },render: function(){ return( <View style={styles.container}> <TouchableHighlight onPress={() => this.goDerper()}> <Text>We must go derper</Text> </TouchableHighlight> </View> ); } }) var styles = StyleSheet.create({ container: { flex: 1,marginTop: 20 } }); module.exports = rootPage;
此代码在文件“nextPage.IOS.js”中
'use strict'; var React = require('react-native'); var { StyleSheet,} = React; var Register = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.text}>My value: {this.props.myElement}</Text> <Text>any text</Text> </View> ); } }) var styles = StyleSheet.create({ container: { flex: 1 } }); module.exports = nextPage;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。