我是新来回应本机.我需要简单的方案在这里通过点击按钮转到新的屏幕.
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;