Question

我一直在努力学习React Native，但它比我想象的更难。我无法创建一个简单的＆＃34;主 - 细节＆＃34;应用程序（我无法找到一个很好的，简单的教程来解释如何操作）。

我设法显示了一个类别列表。单击一个后，它应显示类别名称+此项目列表：

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

在我的详细视图中，未显示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

Answer 1

我找到了解决方案。渲染视图时我犯了一个错误：

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

正确的方法是：

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

感谢mehcode帮助我。

道具未在新路线中显示

1 个答案: