スタックナビゲータにパラメータが渡されていません

Question

私は作業指示を追跡する反応ネイティブのアプリケーションを作成して遊んでいます。私はconfig/data.jsファイルからデータを取得している作業画面用のフィードとして機能するホーム画面を持っています。 1つのワークオーダーをクリックして、ワークオーダーのキーと名前を表示する画面に移動したいのですが、現在はonLearnMore関数でハードコードされたパラメーターをプルするだけです。ここ

は私Home.jsファイルです：

import React, { Component } from "react"; 
import { ScrollView, Text, View } from "react-native"; 
import { Card, Button } from "react-native-elements"; 
import { workOrders } from "../config/data"; 

class Home extends Component { 
onLearnMore = (workOrders) => { 
    this.props.navigation.navigate('WorkOrder', { key: 1, name: "Job 1"}); 
}; 

render() { 
    return (
     <View style={{ flex: 1 }}> 
     <ScrollView contentContainerStyle={{ paddingVertical: 20 }}> 
      {workOrders.map(({ key, name }) => (
      <Card title={`Work Order ${key}`} key={key}> 
       <Text style={{ marginBottom: 10 }}> 
       {name}. 
       </Text> 
       <Button 
       backgroundColor="#03A9F4" 
       title="VIEW NOW" 
       onPress={() => this.onLearnMore(workOrders)} 
       /> 
      </Card> 
     ))} 
     </ScrollView> 
     </View> 
    ); 
} 
} 

export default Home; 

、これが私のWorkOrder.jsファイルです：最後に

import React, { Component } from "react"; 
import { View, Navigator, ScrollView } from "react-native"; 
import { Card, Button, Text, List, ListItem } from "react-native-elements"; 
import { isSignedIn } from "../auth"; 

class WorkOrder extends Component { 
render() { 
    const{ key, name } = this.props.navigation.state.params; 

    return(
     <ScrollView> 
      <List> 
       <ListItem 
        title="Key" 
        rightTitle={'$key'} 
        hideChevron 
       /> 
       <ListItem 
        title="Name" 
        rightTitle={'$name.toUpperCase()'} 
        hideChevron 
       /> 
      </List> 
     </ScrollView> 
    ); 
} 
} 

export default WorkOrder; 

ことができますならば、私のrouter.jsはファイル：

import React from "react"; 
import { Platform, StatusBar } from "react-native"; 
import { StackNavigator, TabNavigator } from "react-navigation"; 
import { FontAwesome } from "react-native-vector-icons"; 

import SignUp from "./screens/SignUp"; 
import SignIn from "./screens/SignIn"; 
import Home from "./screens/Home"; 
import Profile from "./screens/Profile"; 
import WorkOrder from "./screens/WorkOrder"; 

const headerStyle = { 
marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0 
}; 

export const SignedOut = StackNavigator({ 
SignUp: { 
screen: SignUp, 
navigationOptions: { 
    title: "Sign Up", 
    headerStyle 
} 
}, 
SignIn: { 
    screen: SignIn, 
    navigationOptions: { 
     title: "Sign In", 
     headerStyle 
    } 
}, 
}); 

export const FeedStack = StackNavigator ({ 
    Home: { 
     screen: Home, 
     navigationOptions: { 
      title: 'Home', 
     } 
    }, 
    WorkOrder: { 
     screen: WorkOrder, 
     navigationOptions: ({ navigation }) => ({ 
      title: '${navigation.state.params.name}', 
     }), 
    }, 
}); 

    export const SignedIn = TabNavigator(
    { 
     Home: { 
     screen: FeedStack, 
     navigationOptions: { 
     tabBarLabel: "Home", 
     tabBarIcon: ({ tintColor }) => 
      <FontAwesome name="home" size={30} color={tintColor} /> 
     } 
    }, 
    Profile: { 
     screen: Profile, 
     navigationOptions: { 
     tabBarLabel: "Profile", 
     tabBarIcon: ({ tintColor }) => 
      <FontAwesome name="user" size={30} color={tintColor} /> 
     } 
    }, 

    }, 
    { 
    tabBarOptions: { 
     style: { 
     paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0 
     } 
    } 
    } 
); 

export const createRootNavigator = (signedIn = false) => { 
    return StackNavigator(
    { 
     SignedIn: { 
     screen: SignedIn, 
     navigationOptions: { 
      gesturesEnabled: false 
     } 
     }, 
     SignedOut: { 
     screen: SignedOut, 
     navigationOptions: { 
      gesturesEnabled: false 
     } 
     } 
    }, 
    { 
     headerMode: "none", 
     mode: "modal", 
     initialRouteName: signedIn ? "SignedIn" : "SignedOut" 
    } 
); 
}; 

私は新しいネイティブに反応し、この時点までに多くの異なるチュートリアルを使用しました。私が助けてくれれば、このコードでギター・レポを持っています： https://github.com/ryanseery/reactNativeBoilerPlate.git

助けてくれれば幸いです。

Answer 1

私はorderDetailオブジェクトに1つの作業オーダーをマッピングし、それらのパラメータを次のページにプッシュすることでこれを解決しました。もし誰かが興味を持っているなら、以下のコード

import React, { Component } from "react"; 
import { ScrollView, Text, View } from "react-native"; 
import { Card, Button } from "react-native-elements"; 
import { workOrders } from "../config/data"; 

class Home extends Component { 
onLearnMore = (orderDetail) => { 
    this.props.navigation.navigate('WorkOrder', { ...orderDetail }); 
}; 

render() { 
    return (
     <View style={{ flex: 1 }}> 
     <ScrollView contentContainerStyle={{ paddingVertical: 20 }}> 
      {workOrders.map((orderDetail) => (
      <Card title={`Work Order ${orderDetail.key}`}> 
       <Text style={{ marginBottom: 10 }}> 
       {orderDetail.name}. 
       </Text> 
       <Button 
       backgroundColor="#03A9F4" 
       title="VIEW NOW" 
       onPress={() => this.onLearnMore(orderDetail)} 
       /> 
      </Card> 
     ))} 
     </ScrollView> 
     </View> 
    ); 
    } 
    } 

    export default Home;