我试图使用react-native
导航器。
这是我的App.js:
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
} from 'react-native';
import Login from './components/Login/login';
export default class App extends React.Component {
constructor() {
console.log("in default class constructor")
super()
this.renderScene = this.renderScene.bind(this);
}
renderScene(route, navigator){
console.log("route: ",route)
if(route.name == 'Login'){
return <Login navigator={navigator} />
}
else if(route.name == 'Home'){
return <Home navigator={navigator} />
}
}
render() {
console.log("in render")
return (
<Navigator
initialRoute={{ name: 'Login' }}
renderScene = {this.renderScene}
/>
);
}
}
这是我的login.js
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
} from 'react-native';
class Login extends React.Component {
render() {
return (
<View style={styles.container}> <Text>Domain: </Text> </View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
height: 1000,
width: 350
}
});
module.exports = Login;
renderScene
方法中的控制台语句未被命中。如果我只是渲染Login
它正在工作,但如果我使用上面提到的Navigator
,它不会在屏幕上呈现任何内容,但编译时没有错误。
控制台输出:
in default class constructor
in render