导航在阵营本地

Question

我试图导航的反应本地的，这是我的源

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。我试图在AddButton中投掷props作为参数，但没有什么好结果。任何人都知道，如何解决这个问题？

Answer 1

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

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

然后在Add按钮组件，您已经可以使用navigation.navigate功能。