参数未通过，并且在createStackNavigator-React Navigation中导航器不可用

Question

我在我的应用中使用React Navigation。我在标题中用createStackNavigator创建了createBottomTabNavigator，我试图访问从屏幕传递过来的参数，但是这些参数不可用。我也想当有人单击“标题”按钮然后转到新屏幕时，问题是标题按钮中没有'navigation.navigator（）`函数。

这是我的Nav.js的样子：

import React from 'react';
import {View, Text, Button} from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';

const bottomTab = createBottomTabNavigator(
  {
    openOrder: Screen1,
    closeOrder: Screen2
  }
);

const mainNav = createStackNavigator({
  order: {
    screen: bottomTab,
    navigationOptions: ({navigation}) => ({
      headerRight: (
        <View>
          <Button title="Map" onPress={() => console.log(navigation)} />
        </View>
      )
    })
  },
  map: Screen3
});

export default createAppContainer(mainNav);

Screen1.js

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const Screen1 = props => {
  useEffect(() => {
    props.navigation.setParams({
      title: 'Some Content',
      map: mapit,
    });
  }, []);

  const mapit = () => {
    console.log('Map it function');
  };

  return (
    <View>
      <Text>Screen 1</Text>
    </View>
  );
};

export default Screen1;

Screen2.js

import React from 'react';
import {View, Text} from 'react-native';

const Screen2 = () => {
  return(
    <View>
      <Text>Screen 2</Text>
    </View>
  );
}

export default Screen2;

Screen3.js

import React from 'react';
import {View, Text} from 'react-native';

const Screen3 = () => {
  return(
    <View>
      <Text>Screen 3</Text>
    </View>
  );
}

export default Screen3;

这里是Snack

Answer 1

您可以通过创建具有导航功能的按钮来解决此问题。

withNavigation是一个高阶分量，它将navigation道具传递到包装的分量中。当您无法将navigation道具直接传递到组件中，或者如果孩子的嵌套很深，又不想传递它时，它很有用。

Exmaple

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyMoveButton extends React.Component {
  render() {
    return (
      <Button
        title="map"
        onPress={() => {
          this.props.navigation.navigate("map");
        }}
      />
    );
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyMoveButton);

用法

import MyMoveButton from "path for MyMoveButton"
...

headerRight: (
        <View>
          <MyMoveButton />
        </View>
      )