在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

有没有连接你的屏幕在阵营导航到你的服务阵列自动方式，则需要手工做的：

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