在 React Native 中使用 React Navigation 进行路由

Question

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

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 })
  }

到目前为止，我还有一个用于堆栈导航器的 sn-p 代码，它有两个屏幕。我想根据其索引为每个服务添加一个屏幕。我试过用 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>
   );
}