在React Native中使用React导航进行路由

Question

我正在React Native中创建一个应用程序，并且正在使用React Navigation。 在主页上，我有一系列服务。 我希望能够根据服务的索引路由到应用程序中的不同屏幕。 这是代码段。 我怎么做？

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicator,
  AppRegistry,
  Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { addNavigationHelpers } from 'react-navigation';
import SelectMultiple from './SelectMultiple';
import PackingPage from './PackingPage';

const services = 
['Packing Items in Boxes for Shipping and Moving', 
'Unpacking Boxes', 
'Wrap Furniture for Moving and Shipping',
'Wrap Machinery',
'Loading / Lumper Services',
'Unloading / Lumper Services',
'Custom Crating for Boxes, Furniture and Machinery',
'Palletizing Services for Boxes, Furniture and Machinery',
'Shipping / Moving Service to 2nd location',
'Heat Shrink wrapping',
'Shipping Food in AC trucks',
'Shipping Food in Non AC Truck',
'Shipping Cars']

class PackingApp extends Component{

  static navigationOptions = {
    title: '',
  };

  state = { selectedServices: [] }

  onSelectionsChange = (selectedServices) => {
    this.setState({ selectedServices })
  }

到目前为止，我也有一段代码，用于带有两个屏幕的堆栈导航器。 我想根据其索引为每个服务添加一个屏幕。 我尝试使用if / else来做到这一点，但是我无法使其正常工作。

const PackingNav = StackNavigator({
  Home: { screen: HomePage },
  PackingPage: { screen: PackingPage },
}, 
{
  headerMode: "none"
});

Answer 1

没有自动的方法可以将React Navigation中的屏幕连接到服务阵列，您需要手动执行以下操作：

const services = [
   { key:'SomeUniqueIdentifier', name:'Packing Items in Boxes for Shipping and Moving' },
   { key:'AnotherUniqueIdentifier', name:'Unpacking Boxes' },
   ...
];

const PackingNav = StackNavigator({
   Home: { screen:HomePageComponent },
   SomeUniqueIdentifier: { screen:PackingPageComponent },
   AnotherUniqueIdentifier: { screen:UnpackingPageComponent },
   ...
});

然后，在您的HomePageComponent （或从中链接到服务的任何组件）中，您可以按照以下方式进行操作：

render() {
   const { navigate } = this.props.navigation;
   let menu = [];
   services.forEach(service => {
      menu.push(<Button
         onPress={() => navigate(service.key)}
         title={service.name}
      />);
   });
   return (
      <View>
         {menu}
      </View>
   );
}