Question

导航器不工作，它是空的。我得到一个空白页面，主页组件没有显示。我尝试了其他组件并获得了相同的结果。

添加此内容，以便发布问题自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台未知的打印机采用了类型的厨房，并将其拼凑成一本类型的样本。它不仅存在了五个世纪，而且还延续了电子排版，基本保持不变。它在20世纪60年代推出了包含Lorem Ipsum段落的Letraset表格，最近还发布了包括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',
   }
   });

Answer 1

我没有测试过您的代码，但我可以看到您没有以正确的方式使用renderScene（）。我的建议是将您的路线移出App.js文件并以这种方式创建routes.js，这样您就可以避免为路线提供大量的路线：

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;
      }}
    />
}

希望它可以帮助你。

Answer 2

导航器的示例代码

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中传递导航器时，我们将导航器作为组件中的道具。

React Native的Navigator无效

2 个答案: