如何在

时间:2017-09-30 11:33:51

标签: android react-native

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

用户界面有4个文件:

  1. index.android.js:使用react-native init <app_name>
  2. 自动创建
  3. Piper.js:该应用的主要条目。
  4. Screen1.js:应用中的屏幕#1。
  5. Screen2.js:应用中的屏幕#2。
  6. 我正在使用Android-Nugat设备(不是模拟器)。还通过命令行react-native run-android

    运行项目

    点击Screen1上的按钮(下面的代码),我会看到红色屏幕:

    enter image description here

    问题

    • 为什么方法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;
    

1 个答案:

答案 0 :(得分: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;