Routing mit React Navigation in React Native

Question

Ich erstelle eine App in React Native, und ich verwende React Navigation. Auf der Hauptseite habe ich eine Reihe von Diensten. Ich möchte auf der Grundlage der Indizes der Dienste auf verschiedene Bildschirme in der App umleiten können. Dies ist ein Codeausschnitt. Wie mache ich das?

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

Ich habe auch dieses Code-Schnipsel für einen Stack-Navigator mit zwei Bildschirmen bisher. Ich möchte für jeden Dienst einen Bildschirm basierend auf seinem Index hinzufügen. Ich habe es mit einem if/else versucht, aber ich kann es nicht zum Laufen bringen.

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

Answer 1

Es gibt keinen automatischen Weg, um Ihre Bildschirme in Ihre Reihe von Dienstleistungen Reagieren Navigation zu verbinden, müssen Sie dies manuell tun:

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

Dann in Ihrer HomePageComponent (oder welchen auch immer Komponente, die Sie‘ Re Verbindung zu den Diensten von), können Sie etwas tun in der Art von:

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