javascript - Prop 未显示在新 route

Question

我一直在尝试学习 React Native，但它比我想象的要难。我无法创建一个简单的“主从”应用程序(而且我也找不到一个好的、简单的教程来解释如何做到这一点)。

我已成功显示类别列表。单击其中一个后，它应该显示类别名称+项目列表:

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"
  }]
}];

在我的主课上，我成功地显示了类别列表:

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

在我的 onPressItem 中，我有以下内容:

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

在我的详细信息 View 中，未显示类别名称:

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

Answer 1

我找到了解决方案。我在渲染 View 时犯了一个错误:

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

正确的做法是:

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

感谢mehcode帮助我。