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

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

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

---

没有自动方式将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 },
   ...
});

然后，在您的

主页组件中（或从哪个组件链接到服务），您可以执行以下操作：

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

render（）{
const{navigate}=this.props.navigation；
让菜单=[]；
services.forEach（service=>{
menu.push（导航（service.key）}
title={service.name}
/>);
});
返回(
{menu}
);
}
您的服务数组只是一个字符串数组。您需要为每个屏幕（或服务）创建一个组件，然后将其添加到StackNavigator，就像您刚才为另外两个屏幕所做的那样。是的，我为每个屏幕都创建了一个组件。每个服务应对应一个屏幕。如何使用服务元素的索引路由到相应的屏幕？太棒了！我还有两个问题。我希望能够选择一个以上的选项，并有一个不同的颜色，一旦选择的选项。例如，如果选择了打包选项，则一旦按下页面按钮上的“下一步”按钮，该选项将更改颜色并发送到打包页面。但是，如果同时选择了打包和解包选项，则这些选项将路由到单个页面，该页面将打包页面堆叠在解包页面的顶部。如果选择了更多选项，它应该做同样的事情。我该怎么做呢？所选选项的开/关状态是您在React导航之外可以管理的。一种方法是在组件上设置一个
selectedOptions
state属性，每当切换一个选项时更新该属性（并根据该选项是否在该
selectedOptions
state属性中应用样式），然后在末尾设置一个按钮，点击该按钮时调用React Navigations
navigate（）
并将所选选项列表作为参数传递（请参阅），该参数可用于决定在该页面上呈现哪些组件。