在React-Native中导航

Question

我试图在react-native中导航，这是我的来源

 import React from 'react'; import { StackNavigator } from 'react-navigation'; import { Text, TouchableOpacity } from 'react-native'; import LoginForm from './components/LoginForm'; import EmployeeList from './components/EmployeeList'; import EmployeeCreate from './components/EmployeeCreate'; const AddButton = (param) => ( <TouchableOpacity onPress={() => console.log(param)}> <Text style={styles.addButtonStyle}>Add</Text> </TouchableOpacity> ); const styles = { addButtonStyle: { fontSize: 18, marginRight: 25, color: '#007AFF' }, headerTitleStyle: { fontWeight: 'normal', alignSelf: 'center', marginLeft: 50 } }; const RouterComponent = StackNavigator({ EmployeeList: { screen: EmployeeList, navigationOptions: { title: 'Employee List', headerTitleStyle: styles.headerTitleStyle, headerLeft: null, headerRight: AddButton() } }, EmployeeCreate: { screen: EmployeeCreate, navigationOptions: { title: 'Employee Create' } }, Home: { screen: LoginForm, navigationOptions: { title: 'Please, Log In', headerTitleStyle: styles.headerTitleStyle } } }); export default RouterComponent; 

实际上，我需要的是它在我的const AddButton到达this.props.navigation.navigate('EmployeeCreate'); 对我来说，可以从AddButton导航到EmployeeCreate ，但是AddButton没有任何props 。 我试图将props作为参数添加到AddButton ，但是没有任何反应。 有人知道，如何解决这个问题？

Answer 1

在StackNavigator的EmployeeList组件中，可以这样定义navigationOptions：

navigationOptions: ({navigation}) => 
return {
  title: 'Employee List',
  headerTitleStyle: styles.headerTitleStyle,
  headerLeft: null,
  headerRight: AddButton(navigation)
}

然后，在AddButton组件中，您已经可以使用navigation.navigate函数。