React Native 动态 ListView 主细节

Posted 2023-02-23

【中文标题】React Native 动态 ListView 主细节

【英文标题】：React Native Dynamic ListView Master Detail

【发布时间】：2016-09-20 14:45:28

【问题描述】：

任何人都可以通过提供一个包含一行的列表视图示例来帮助我，在按下时通过包含行名称的导航器将道具传递给另一个组件？我似乎找不到任何关于此的信息，而且我找到的示例和答案有很多不同的语法，以至于我无法知道何时应该绑定一个函数，而不是简单的 this.state 东西。

【参考方案1】：

您基本上会设置您的导航功能以接受来自您的 ListView renderRow 方法的数据作为参数：

_navigate(title) 
  this.props.navigator.push(
    name: 'Page2',
    passProps: 
      title
    
  )

然后在您的 renderRow 方法中附加此函数，如下所示：

renderRow (rowData) 
  return <TouchableOpacity
           style=height: 60, backgroundColor: 'red'
           onPress=() => this._navigate(rowData.title)>
             <Text>rowData.title</Text>
         </TouchableOpacity>

我在 RNPlay here 上设置了工作示例。

https://rnplay.org/apps/-tbxbQ

【讨论】：

我仍然无法弄清楚为什么我的导航为空，有什么想法吗？ gist.github.com/anonymous/5fa3026514b0930c21633200049f85f6

navigator 是否已作为道具传递给组件？

我相信是这样，也许是因为我正在动态创建行？如果您有时间看一下，这里是索引和详细信息。 gist.github.com/anonymous/5a7ba95d970fb643be37ee637285189e

啊，你需要renderScene= this.renderScene.bind(this) vs renderScene= this.renderScene ，因为你使用的是类语法。

再次感谢伙计！从字面上看，他们花了大约 50 个小时试图弄清楚这一点。 renderscene.bind(this) 需要与 renderrow.bind(this) 一起更改以供将来阅读此内容的任何人使用。