react-native ListView 通过Navigator传递数据
2017-01-03 03:32
525 查看
开发环境:RN android端+聚合数据
需要解决的任务:如何一次性为所有的ListView列表添加navigator导航,同时各自导向自己的页面,同时所有的页面可以返回到主导航页
遇到的问题:
模板页是独立的,navigator只能push模板组件,多余的数据无法传递过去,接收的数据全部为空
解决方法:
不需要传递数据,直接在本页面ListView组件的渲染函数 _renderRow 函数中创建模板组件
总结一下就是:模板组件定义咋listView内部,对所以组件可以访问_renderRow传递的数据,而不用担心this丢失,作用域变换带来的数据丢失的问题
需要解决的任务:如何一次性为所有的ListView列表添加navigator导航,同时各自导向自己的页面,同时所有的页面可以返回到主导航页
遇到的问题:
模板页是独立的,navigator只能push模板组件,多余的数据无法传递过去,接收的数据全部为空
解决方法:
不需要传递数据,直接在本页面ListView组件的渲染函数 _renderRow 函数中创建模板组件
//。。。这里是在_renderRow渲染函数里面定义的新模板组件 class Model extends Component{ constructor(props) { super(props); } render() { return ( <View style={{flex:1}}> <View> <Text onPress={ ()=>this.props.navigator.pop()}>返回</Text>//返回 </View> <WebView source={{uri:row.url}}//向模板页注入数据点 javascript={true} domStorageEnable={true} /> </View> ) } } //后面接着就是是_renderRow渲染ListView数据的部分,当然会有一个onPress函数,触发navigator导向各自的Model组件页了!
总结一下就是:模板组件定义咋listView内部,对所以组件可以访问_renderRow传递的数据,而不用担心this丢失,作用域变换带来的数据丢失的问题
相关文章推荐
- React Native 基础篇之Navigator页面的跳转与数据的传递
- React-native ListView 必须点击屏幕才会加载数据
- 手把手教你iOS如何调用React Native,即是iOS与RN的交互,将推送数据传递RN
- react-native组件中NavigatorIOS和ListView结合使用的方法
- 详解react native页面间传递数据的几种方式
- React Native学习笔记之--组件之间数据的传递和跳转
- React-Native基础_5.列表视图ListView 网络数据展示
- React-Native学习笔记 使用ListView加载网络数据
- React Native第一个Demo(2)网络获取数据和ListView
- React Native原生模块向JS传递数据的几种方式(Android)
- react native 子控件传递数据给父控件
- react-native ListView加载大量数据时会占用大量内存导致应用崩溃
- ReactNative之刷新机制和界面间的数据传递
- 从零开始 React Native (5) React 数据传递_表单_函数复用_动画
- React-native学习过程 三 通过网络获取数据
- react native listView(1) 加载网络数据简单版
- React Native之学习ListView的单选以及记录数据
- React-Native进阶_6.导航 Naviagtion传递数据并展示
- React-Native进行时(四)--ListView navigator.push
- 在Android中,通过extras在activity之间传递数据