如何在

Question

我正在创建一个Android应用程序，其中UI是以原生的方式完成的。

用户界面有4个文件：

1. index.android.js：使用react-native init <app_name>
自动创建
2. Piper.js：该应用的主要条目。
3. Screen1.js：应用中的屏幕＃1。
4. Screen2.js：应用中的屏幕＃2。

我正在使用Android-Nugat设备（不是模拟器）。还通过命令行react-native run-android

运行项目

点击Screen1上的按钮（下面的代码），我会看到红色屏幕：



问题

• 为什么方法navigate（在const {navigate} = this.props.navigation;中，参见Screen1.js render()函数）未定义？
• 应如何使用？
• 使StackNavigator无效的代码中包含哪些内容？

以下是文件的内容：

index.android.js

import { AppRegistry } from 'react-native';
const Piper = require('./js/Piper');
AppRegistry.registerComponent('Piper', () => Piper);

Piper.js

/**
 * @flow
 */
 import { StackNavigator } from 'react-navigation';
 const React = require('React');
 const Screen1 = require('./intro/Screen1');
 const Screen2 = require('./intro/Screen2');

 const piperRoute = StackNavigator({
    Screen1: { screen: Screen1},
    Screen2: { screen: Screen2},
  });

 class Piper extends React.Component {
   constructor() {
     super();
   }
   render(): React.Node {
     return (
       <Screen1 navigation={piperRoute}/>         
     );
   }
 }
module.exports = Piper;

Screen1.js

/**
 *
 * @providesModule Screen1
 * @flow
 */
"use strict";

import StackNavigator from 'react-navigation';
/* other imports used in render() */

class Screen1 extends React.Component<{navigation: StackNavigator}> {
  static navigationOptions = { title: "Welcome" }

  constructor() {
    super();
  }

  render(): React.Node {
    const {navigate} = this.props.navigation;
    return (
      <View>
        <Button
          title='ok'          
          onPress={() => navigate('RequestPermission', {navigation: this.props.navigation})}
        />         
      </View>
    );
  }
}

const styles = StyleSheet.create({ /* ... styles ...*/});

module.exports = Screen1;

Screen2.js

/**
 *
 * @providesModule Screen2
 * @flow
 */
 'use strict';
 import StackNavigator from 'react-navigation';

 /* other imports */

 class Screen2 extends React.Component<{navigation: StackNavigator}> {
   render(): React.Node {
     return (
       <View>
         <Image ... />
       </View>
     );
   }
 }
 const styles = StyleSheet.create({ /* ... */ });
 module.exports = Screen2;

Answer 1

试试这个。您应该在入口点传递导航器进行渲染.Stack导航器将自动加载screen1组件。导航道具将仅可用。

<强> Piper.js

/**
 * @flow
 */
 import { StackNavigator } from 'react-navigation';
 const React = require('React');
 const Screen1 = require('./intro/Screen1');
 const Screen2 = require('./intro/Screen2');

 const piperRoute = StackNavigator({
    Screen1: { screen: Screen1},
    Screen2: { screen: Screen2},
  });

 class Piper extends React.Component {
   constructor() {
     super();
   }
   render(): React.Node {
     return (
       <piperRoute/>         
     );
   }
 }
module.exports = Piper;