Question

我正在构建一个应用程序，该应用程序显示每个作业和通勤时间。我有一个JobsComponent，在其中显示作业。在此组件中，我在导航栏上添加了一个图标。轻按图标时，应打开一个MapComponent。在此地图中，我想为每个作业显示一个图钉。

我面临的问题是我已经在AppNavigator.js中定义了图标，并且希望在JobsComponent.js中具有onPress（）功能，但是我不知道该怎么做。我尝试过的：

向navHeaderRight添加({ onPress })参数：

export const navHeaderRight =（{onPress}）=> （/ UI组件在这里 / ）

但没有结果。

我的另一个想法是在AppNavigator.js中定义onPress（）行为，但这意味着将很多东西（作业数组，每个作业的详细信息）导入AppNavigator.js，这不是从我的角度来看，这是一个很好的设计决定。
我尝试只通过JobsComponent在navHeaderRight.onPress中执行console.log，以查看它是否可以正常工作。不是。

这是我的AppNavigator.js：

import {TouchableHighlight, Image, View} from 'react-native';
import MapComponent from './MapComponent';

export const navHeaderRight = ({ onPress }) =>
  (
    <View style={{marginRight: 5}}> 
      <TouchableHighlight underlayColor="transparent">
          <Image 
              source={require('../assets/map.png')} 
              style={{height: 40, width: 40}}/>
      </TouchableHighlight>
    </View>
  )


const Navigator = createStackNavigator({
    Jobs: { 
      screen: Jobs,
      navigationOptions: {
            headerRight: navHeaderRight
          }
    },
    MapComponent: { 
      screen: MapComponent,
      navigationOptions: {
        header: null
      } 
    }
//other screens defined in the navigator go here
  });

const AppNavigator = createAppContainer(Navigator);

export default AppNavigator;

这是我的JobsComponent.js。在这里，我尝试在componentDidMount（）中定义onPress（）行为。

import {navHeaderRight} from './AppNavigator';

class Jobs extends Component {

componentDidMount() {
        navHeaderRight.onPress = () => {
            this.props.navigation.navigate('MapComponent', {/*other params go here*/})
        }
    }
}

预期结果：调用navHeaderRight.onPress时，应打开MapComponent。

**

实际结果：什么也没有发生。

**

任何帮助将不胜感激。：）

Answer 1

您可以使用React Navigation route parameters来实现。

在AppNavigator.js中：

import { TouchableHighlight, Image, View } from 'react-native';
import MapComponent from './MapComponent';

const navHeaderRight = (navigation) => {
  const handlePress = navigation.getParam('handlePress', null);
  return (
    <View style={{marginRight: 5}}> 
      <TouchableHighlight
        underlayColor="transparent"
        onPress={handlePress}
      >
        <Image 
          source={require('../assets/map.png')} 
          style={{height: 40, width: 40}}
        />
      </TouchableHighlight>
    </View>
  );
}

const Navigator = createStackNavigator({
  Jobs: { 
    screen: Jobs,
    navigationOptions: ({ navigation }) => ({
      headerRight: navHeaderRight(navigation),
    }),
  },
  MapComponent: { 
    screen: MapComponent,
    navigationOptions: {
      header: null,
    } 
  }
});

const AppNavigator = createAppContainer(Navigator);

export default AppNavigator;

在JobsComponent.js中：

class Jobs extends Component {
  componentDidMount() {
    const handlePress = () => console.log('whatever function you want');
    this.props.navigation.setParams({ handlePress });
  }

  // [...]
}

从导入的UI导航栏组件中调用onPress方法

1 个答案: