React Native的导航器不工作
React Native的导航器不工作
提问于 2017-03-17 13:16:24
导航器不工作，它是空的。我得到一个空白页面，主页组件没有显示。我尝试了其他组件，得到了相同的结果。
加上这个，这样我就可以发布这个问题Lorem Ipsum自15世纪以来一直是业界的标准虚拟文本，当时一个未知的打印机拿出一个排版，然后把它弄乱，做成了一个排版样本簿。它不仅存活了五个世纪，还经历了电子排版的飞跃，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset sheets的发布而流行起来，最近又随着包括Lorem Ipsum版本的桌面出版软件Aldus PageMaker而流行起来。
import React, { Component } from 'react';
import {
AppRegistry,
View,
Text,
StyleSheet,
Navigator
} from 'react-native';
import Login from './components/Login';
import Home from './components/Home';
import LoginForm from './components/LoginForm';
export default class App extends Component {
renderScene(route, navigator) {
console.log(route);
if(route.name == 'login') {
return <Login navigator={navigator} />
}
if(route.name == 'home') {
return <Home navigator={navigator} />
}
}
render() {
return (
<View style={styles.container}>
<Navigator
initialRoute={{name: 'home'}}
renderScene={this.renderScene.bind(this)}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4fb0c9',
}
});回答 2
Stack Overflow用户
发布于 2017-03-17 14:23:52
我还没有测试您的代码，但是我可以看到您没有以正确的方式使用renderScene()。我的建议是将你的路由从App.js文件中移出，并以这种方式创建一个routes.js，这样你就可以避免你的路由有很多if：
Route.js
import LoginView from './LoginView';
import HomeView from './HomeView';
let routes = {
HomeView: {
name: 'HomeView',
component: HomeView,
index: 0
},
LoginView: {
name: 'LoginView',
component: LoginView,
index: 1,
sceneConfig: Navigator.SceneConfigs.PushFromRight //you can change your view transitions here
},
};
export default Routes;在您的app.js文件中，您必须
import Routes from './routes';并更新render()
render(){
<Navigator
initialRoute={Routes.HomeView}
sceneStyle={styles.container}
renderScene={(route, navigator) => {
const Component = route.component;
return <Component
navigator={navigator} //pass it down to each view so it can be called
route={route}
/>
}}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FadeAndroid;
}}
/>
}希望它能帮到你。
Stack Overflow用户
发布于 2017-03-17 16:50:37
导航器的示例代码
import SplashScreen from './SplashScreen';
class AppContainer extends Component {
render() {
return (
<Navigator
initialRoute={{ id: 'SplashScreen', name: 'Index' }}
renderScene={this.renderScene.bind(this)}
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
/>
);
}
renderScene = (route, navigator) => {
if (route.id === 'SplashScreen') {
return (
<SplashScreen
navigator={navigator}
/>
);
}
}
}当我们在splashScreen中传递导航器时，我们将导航器作为组件中的道具。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42849708
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号