navigationOptions 属性中的 onPress 事件

Question

我正在尝试在我的一个屏幕的标题区域中创建一个菜单按钮。

但是，我不知道如何让 onPress 导航正常工作。

显然，下面的代码会产生错误，因为导航是在第一次使用后定义的。

但是，当我尝试在设置 navigationOptions 属性之前将 const { navigate } 声明上移时，我的 IDE（Visual Studio 代码）中出现“意外令牌”错误。

有没有办法解决这个问题？

谢谢！

export default class HomeScreen extends React.Component
 {
    constructor(props) {
    super(props); 
}
    static navigationOptions = {
        title: 'Seekers',
            headerRight: 
                <TouchableHighlight onPress={ () => navigate('Menu', { 
                    menu: options
                })}>
                    <Image source={require('./images/menu.png')} style={{width: 50, height: 50}} />
                </TouchableHighlight>,
};

render() {

    const { navigate } = this.props.navigation;
    return (
            <View>
            ... more view stuff...

Answer 1

在 React Native 的最后几次更新中，自定义标题发生了变化，传递导航选项也发生了变化。根据文档Screen Navigation Options，动态配置是可能的，“navigationOptions”现在可以用作以导航选项为参数的函数。

例如，我想要一个按钮来关闭和打开标题中的 DrawerNavigator。在我的router.jsfile 中，我写道：

export const Root = StackNavigator({
    App: {
        screen: AppDrawer,
        navigationOptions: ({navigation}) => ({
            headerLeft: <BurgerMenu nav = {navigation} />,
        })
    }
}, {
    headerMode: 'screen',
});

在你的情况下，我认为你应该将你的 navigationOptions 声明为一个函数：

static navigationOptions: ({navigation}) => ({
    title: 'Seekers',
    headerRight: <TouchableHighlight onPress={ () =>
                     navigation.navigate('Menu', { menu: options })}>
                     <Image source={require('./images/menu.png')} style={{width: 50, height: 50}} />
                 </TouchableHighlight>,
};

我没有亲自尝试从组件本身设置 navigationOptions。相反，我在 StackNavigator 中声明了选项。

让我知道它是否有效！

编辑

我的导航是如何工作的？

对于我的应用程序的导航端，我只是使用react-navigation。

在这里复制我的文件的所有内容会很长，所以我创建了一个Gist 供您查看我是如何实现的。

首先，我创建一个router.js 文件，在其中定义我的屏幕和导航类型 (here)。关注名为Root 的变量，这是我的主要 StackNavigator。这是我的应用程序的入口点。

其次，我编辑了index.android.js 和index.ios.js，所以它们都呈现相同的组件。

import { AppRegistry } from 'react-native';
import App from './src/index';

AppRegistry.registerComponent('obexto_expensemanager', () => App);

第三。 我的 App 组件包含什么？这个组件是我用来呈现在router.js 中定义的入口点的组件。此文件中重要的是：

import { Root } from './config/router';

class App extends Component {

    render() {
        return (
            <Root />
        )
    }
}

我使用router.js 中定义的 StackNavigator 作为我的应用程序的主要组件。

为什么？我喜欢这种导航的工作方式，因为您将堆栈与组件清楚地分开。您的所有导航都设置在一个文件中。因此，在您的项目中，您将拥有包含所有组件的 scene 文件夹和连接它们的 router。

在我的示例中，我想在标题中添加一个按钮，以便我可以打开 DrawerNavigator。定义 Navigator 时，可以从 navigationOptions 访问标题，这就是我在 App StackNavigator 中定义选项 headerLeft 的原因，因此它在每个屏幕中都可见。

我不知道这对您来说是否清楚，但请不要犹豫，告诉我是否还不清楚以及您仍然不清楚什么。我会尽力帮忙的！

Answer 2

只是想一想，直接在 StackNavigator 上声明 navigationOptions 怎么样（假设您正在使用它）。例如

`

const Nav = StackNavigator({yourRoutes}, {
{
  navigationOptions: {...}
}
});

`