RN 遇到的问题

在写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

1. 在处理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);
          }}

2. 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];
}

RN使用原生View参考