修改

Question

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

但是，我无法弄清楚如何让onPress导航工作。

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

但是，当我在设置navigationOptions属性之前尝试移动const {navigate}声明时，我得到一个＆＃34;意外的令牌＆＃34;我的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

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

`

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

`

Answer 2

自定义在React Native的最后几个更新中更改的标头，并且传递的导航选项也已更改。根据文档Screen Navigation Options，动态配置是可行的，并且＆＃39; navigationOptions＆＃39;现在可以用作将导航选项作为参数的函数。

例如，我想要一个按钮关闭并在标题中打开我的DrawerNavigator。在我的router.js文件中，我写道：

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了。您在定义导航器时可以从navigationOptions访问标题，这就是我在App StackNavigator中定义选项headerLeft的原因，因此它在每个屏幕中都可见。< / p>

我不知道这对你来说是否清楚，但不要犹豫告诉我它是否不存在以及你仍然有什么阻碍。我会尽力帮助你！

navigationOptions属性中的onPress事件

2 个答案:

修改

我的导航如何运作？