我尝试在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/