導航在陣營本地

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功能。