我试图在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');
中,以便我能够从EmployeeCreate
导航到AddButton
,但是AddButton
没有任何props
。我试图将props
用作AddButton
中的参数,但没有任何反应。有人知道,如何解决这个问题? 最佳答案
在StackNavigator的EmployeeList组件中,可以这样定义navigationOptions:
navigationOptions: ({navigation}) =>
return {
title: 'Employee List',
headerTitleStyle: styles.headerTitleStyle,
headerLeft: null,
headerRight: AddButton(navigation)
}
然后,在AddButton组件中,您已经可以使用navigation.navigate函数。
关于javascript - 在React-Native中导航,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45684606/