在 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: ({navigation}) => 
return {
  title: 'Employee List',
  headerTitleStyle: styles.headerTitleStyle,
  headerLeft: null,
  headerRight: AddButton(navigation)
}

那么在AddButton组件中，已经可以使用navigation.navigate功能了

在 React-Native 中导航

Navigate in React-Native

javascript

reactjs

react-native

react-navigation