我是 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,
View,
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,
navigationBarHidden: true,
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,
View,
Text,
} = 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;
关于ios - react native 按钮单击移动到另一个屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35331737/