在写RN ListView 的时候出现的个问题 记录一下
1 . Each child in an array or iterator should have a unique "key" prop
在处理ListView的时候为了区分每一个section& row， RN 需要为每一个cell 提供一个key （ID）目的就是在使用diff 算法的时候能够准确检测出哪些内容是变化的。
所以我们在写renderRow 和renderSeparator 的时候，返回的视图要加一个key 属性.
例如：
<View ... key = {sectionID+"_"+rowID}>
可以参考：
key props
2 .RawText""must be wrapped in an explicit<Text>component
常见的错误是Text之外的标签之间多了空格，或是用了错误的注释
3. TouchableXXX 类型的元素控件，其只能含有一个子元素
4. 使用ScrollView
- 在处理ScrollView onScroll 时，我们按照官方的文档 想得到scrollView的offset,这是我们会以开发iOS 的思路获取ScrollView 实例的引用，
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
onScroll={() => {
this._offsetX = this._scrollView.contentOffset
}}
这样会发现contentOffset 是undifined的
我查看了一些使用ScrollView的例子，发现用法也有直接使用scrollView.contentOffset 真不知道咋跑起来的
其实真正的用法是这样的
onScroll={(event) => {
this._offsetX = event.nativeEvent.contentOffset.x;
this._selectedIndex = Math.round(this._offsetX / screenWidth);
}}
- ScrollView 子元素的排列
baseX = 5;//+= (141 + 10) * index; // marginLeft 计算偏移量 不是ios 的计算方式了
<View style={{ justifyContent: "center", alignItems: "center", marginLeft: baseX, }} key={"zoneItem" + index} >
<TouchableWithoutFeedback
onPress={(e) => { console.log("点击zone item"); }}>
<Image source={{ uri: imgURL }} style={styles.zoneItem} />
</TouchableWithoutFeedback>
</View>
RN 使用 原生模块
我们看官方的文档使用原生view,
var { requireNativeComponent } = require('react-native');
// requireNativeComponent 自动把这个组件提供给 "RNTMapManager"
module.exports = requireNativeComponent('RNTMap', null);
这个requireNativeComponent('RNTMap', null); 参数都传递哪些值呢？查看定义
export function requireNativeComponent<P>(
viewName: string,
componentInterface?: ComponentInterface<P>,
extraConfig?: {nativeOnly?: any}
): React.ComponentClass<P>;
viewName 是指原生的View
componentInterface 在RN中包装原生view的组件名
参考例子
import React, {
Component,
PropTypes
} from 'react';
import { View, Image, StyleSheet, Text, requireNativeComponent} from 'react-native';
// RNAnimatedView 是JFAnimatedCellView 子组件 ,
var RNAnimatedView = requireNativeComponent("JFIndexStatisticsTableViewCell", JFAnimatedCellView);
export default class JFAnimatedCellView extends Component {
static propTypes = {
/**
*
* 定义组件需要传到原生端的属性
* 使用React.PropTypes来进行校验
*/
//控制动画的次数
isRun:PropTypes.bool,
//赚取总收益
totalEarning:PropTypes.number,
//需注册人数
registerCount:PropTypes.number,
};
constructor(props) {
super(props);
}
render() {
return (
<RNAnimatedView {...this.props} style = {{flxe:1,height:200}}/>
);
}
}
我们还要定义一个RCTViewManager的子类，来管理veiw,又遇到了问题，参考官方文档，RCT_EXPORT_MODULE() 为空的话，RN 那边怎么知道使用哪个值？看看之前的文档说：
为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。
那默认是使用模块的名字？在我们的例子中默认是 JFIndexAnimationViewManager?
按照文档的说明确实是。
经过测试必须和RN中的viewName参数 一致，RCT_EXPORT_MODULE(JFIndexStatisticsTableViewCell) 和 var RNAnimatedView = requireNativeComponent("JFIndexStatisticsTableViewCell", JFAnimatedCellView); 中的参数一致
ViewName 是原生组件视图的类名
@implementation JFIndexAnimationViewManager
RCT_EXPORT_MODULE(JFIndexStatisticsTableViewCell)
RCT_EXPORT_VIEW_PROPERTY(isRun, BOOL)
RCT_EXPORT_VIEW_PROPERTY(totalEarning, NSNumber)
RCT_EXPORT_VIEW_PROPERTY(registerCount, NSNumber)
- (UIView*)view{
return [[JFIndexStatisticsTableViewCell alloc] init];
}
