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