2016-07-17 26 views
1

私はReact Nativeを習得しようとしていましたが、思っていたよりも頑丈でした。私は単純な「マスターディテール」アプリを作ることができません(そして、私はそれをやる方法を説明する良い、簡単なチュートリアルを見つけることができませんでした)。新しいルートに小道具が表示されない

私はカテゴリのリストを表示することができました。 1をクリックした後、それはここからカテゴリ名+アイテムの一覧を表示する必要があります。私のメインクラスで

const data = [{ 
    "category": "Fruits", 
    "items": [{ 
    "name": "Apple", 
    "icon": "apple.png" 
    }, { 
    "name": "Orange", 
    "icon": "orange.png" 
    }] 
}, { 
    "category": "Vegetables", 
    "items": [{ 
    "name": "Lettuce", 
    "icon": "lettuce.png" 
    }, { 
    "name": "Mustard", 
    "icon": "mustard.png" 
    }] 
}]; 

を、私はカテゴリのリストを表示するには、管理:私のonPressItem

<ListView 
    dataSource={this.state.dataSource} 
    renderRow={(rowData) => 
    <Text onPress={this.onPressItem.bind(this, rowData.category)}> 
    {rowData.category} 
    </Text>} 
/> 

I以下の持っている:私の詳細ビューで

onPressItem(category) { 
    this.props.navigator.push({ 
    name: 'DetailView', 
    component: DetailView, 
    passProps: { 
     category 
    } 
    }); 
} 

category名が表示されていない:

class DetailView extends Component { 
    render() { 
    return (
     <View style={ styles.container }> 
     <Text>Category: { this.props.category }</Text> 
     <TouchableHighlight onPress={() => this.props.navigator.pop() }> 
      <Text>GO Back</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

本当にありがとうございます。それはおそらく私が間違っている何かばかげたものです。この単純なことを作成することはそれほど難しいことではありません。 :/

Full code

答えて

0

私は解決策を見つけました。ビューをレンダリングするとき、私は間違いを犯した。

return React.createElement(
    route.component, 
    { navigator }, 
    {...route.passProps} 
); 

正しい方法は次のとおりです。私を助けるためmehcode

return React.createElement(
    route.component, 
    { navigator, ...route.passProps } 
); 

感謝。

関連する問題