4、React Native开发：从简单应用到复杂界面构建

React Native开发：从简单应用到复杂界面构建

1. 创建简单的React Native应用

在创建简单的React Native应用时，我们会涉及到数据源的创建、列表的渲染以及布局的设计等内容。

1.1 数据源与列表渲染

在创建列表时，我们需要创建数据源并将数据添加到状态中。 ListView.DataSource 类为 ListView 组件实现了高性能的数据处理。 rowHasChanged 属性是必需的，它应该是一个用于比较下一个元素的函数。例如， (r1, r2) => r1 !== r2 ，如果数据发生变化，React Native会重新渲染UI。

当向数据源填充数据时，我们需要调用 cloneWithRows 方法并传入一个记录数组。如果要添加更多数据，再次调用 cloneWithRows 方法，传入包含先前和新数据的数组，数据源会计算差异并根据需要重新渲染列表。

在渲染列表时，只需要两个属性：数据源和 renderRow 。 renderRow 属性接受一个函数作为值，该函数需要返回每行的JSX。

// 示例代码
// 创建数据源
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this