React本机Android Navigator-场景空白

我试着做一个navigator的例子，但是场景总是空白的。一些建议告诉我将flex:1设置为navigator，但是它不起作用！ 这是我的密码： index.android.js：

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Navigator,
  Text,
  View
} from 'react-native';
import Homepage from './Homepage' ;
class NavigatorTest extends Component {
  render() {
    var defaultName = 'Homepage' ;
    var defaultCom = Homepage ;
    return (
      <Navigator style = {{flex:1}}
        initialRoute = {{name: defaultName,component:Homepage }}
        configureScene = {() => {
          return Navigator.SceneConfigs.VerticalDownSwipeJump ;
        }}
        renderScene = {(route,navigator) => {
          let Component = route.component ;
          if (route.component) {
            return <Component {...route.params} navigator = {navigator} />
          }
        }} />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('NavigatorTest', () => NavigatorTest);

“严格使用”；
进口反应{
评估学，
组成部分，
样式表，
领航员，
文本，
看法
}从“反应本机”；
从“./Homepage”导入主页；
类NavigatorTest扩展组件{
render（）{
var defaultName='主页'；
var defaultCom=主页；
返回(
{
返回Navigator.sceneconfig.VerticalDownSwipeJump；
}}
renderScene={（路线、导航器）=>{
让组件=route.Component；
if（路由组件）{
返回
}
}} />
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#F5FCFF”，
},
});
AppRegistry.registerComponent（'NavigatorTest'，（）=>NavigatorTest）；

主页.js

import React, {
  Component,
  StyleSheet,
  TouchableOpacity,
  Text,
  View
} from 'react';
import Detailpage from './Detailpage' ;
export  class Homepage extends React.Component {
  static propTypes = {
  };

  constructor(props) {
    super(props);
  }
  _pressButton() {
    const {navigator} = this.props ;
    if(navigator) {
        navigator.push({
            name: 'Detailpage',
            component:Detailpage,
        })
    }
  }

  render() {
    return (
      <View>
        <TouchableOpacity onPress = {this._pressButton}>
            <Text>click to jump to Detailpage!</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

import-React{
组成部分，
样式表，
可触摸不透明度，
文本，
看法
}从"反应",；
从“./Detailpage”导入Detailpage；
导出类主页扩展React.Component{
静态类型={
};
建造师（道具）{
超级（道具）；
}
_按按钮（）{
const{navigator}=this.props；
if（导航器）{
导航器。推({
名称：'Detailpage'，
组件：Detailpage，
})
}
}
render（）{
返回(
单击以跳转到详细信息页面！
);
}
}

Detailpage.js

import React, {
  Component,
  StyleSheet,
  TouchableOpacity,
  Text,
  View
} from 'react';
import Homepage from './Homepage' ;
export class Detailpage extends React.Component {
  static propTypes = {
  };
  constructor(props) {
    super(props);
  }
  _pressButton() {
    const {navigator} = this.props ;
    if (navigator) {
        navigator.pop() ;
    }
  }
  render() {
    return (
      <View>
        <TouchableOpacity onPress = {this._pressButton}>
            <Text>click to get back</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

import-React{
组成部分，
样式表，
可触摸不透明度，
文本，
看法
}从"反应",；
从“./Homepage”导入主页；
导出类Detailpage扩展React.Component{
静态类型={
};
建造师（道具）{
超级（道具）；
}
_按按钮（）{
const{navigator}=this.props；
if（导航器）{
navigator.pop（）；
}
}
render（）{
返回(
点击返回
);
}
}

---

我是react native的新手，请给我一些建议，提前谢谢

尝试简化和分离导航器逻辑。这样调试也会更容易

class NavigatorTest extends Component {

  render() {
    return (
      <Navigator
        initialRoute={{id: 'Homepage'}}
        configureScene={this.configureScene}
        renderScene={this.renderScene}
      />
    );
  }

  configureScene() {
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
  }

  renderScene(route, navigator) {
    switch(route.id) {
      case 'Homepage':
        return this.renderHomepage(navigator);
      case 'Detailpage':
        return this.renderDetailpage(navigator);
      default:
        throw new Error('No route found for id ' + route.id);
    }
  }

  renderHomepage(navigator) {
    return <Homepage navigator={navigator} />;
  }

  renderDetailpage(navigator) {
    return <Detailpage navigator={navigator} />;
  }

}

---

Villeaka提出的分离导航器逻辑对于阅读和分析更为清晰

在“renderScene”范围内调用了方法“this.renderHomepage（navigator）”，因此其中的“this”指的是“renderScene”，而不是NavigatorTest组件，将“this”传递给如下新变量：

renderScene(route, navigator) {
var me = this;
switch(route.id) {
  case 'Homepage':
    return me.renderHomepage(navigator);
  case 'Detailpage':
    return me.renderDetailpage(navigator);
  default:
    throw new Error('No route found for id ' + route.id);
}}

---

我觉得你的导航看起来有点混乱，我发现这段视频让它变得很简单

顺便说一下，我对你的代码的快速思考是

<Navigator style = {{flex:1}}
    initialRoute = {{name: defaultName,component:Homepage }}
    configureScene = {() => {
      return Navigator.SceneConfigs.VerticalDownSwipeJump ;
    }}
    renderScene = {(route,navigator) => {
      let Component = route.component ;
      if (route.component) {
        return <Component {...route.params} navigator = {navigator} />
      }
}} />

{
返回Navigator.sceneconfig.VerticalDownSwipeJump；
}}
renderScene={（路线、导航器）=>{
让组件=route.Component；
if（路由组件）{
返回
}
}} />

---

“let Component”看起来不正确，因为变量名不应与在代码顶部导入的“Component”库相同，导致不明确

谢谢您的回答，但我得到了“undefined不是一个函数（评估'this.renderHomepage（navigator）”，我如何找到该函数？

<Navigator style = {{flex:1}}
    initialRoute = {{name: defaultName,component:Homepage }}
    configureScene = {() => {
      return Navigator.SceneConfigs.VerticalDownSwipeJump ;
    }}
    renderScene = {(route,navigator) => {
      let Component = route.component ;
      if (route.component) {
        return <Component {...route.params} navigator = {navigator} />
      }
}} />