我正在创建一个Android应用程序,其中UI是以原生的方式完成的。
用户界面有4个文件:
index.android.js
:使用react-native init <app_name>
Piper.js
:该应用的主要条目。Screen1.js
:应用中的屏幕#1。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;
答案 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;