React Native 使用问题记录

1.<View></View>之间有空格会报错 Trying to add unknown view tag

2.一些js语法糖注意点
http://facebook.github.io/react-native/docs/javascript-environment.html#content
函数表达式语法:
()=>xxx 等于 function(){return xxx;}
函数表达式语法:
state={a:1,B:2,C:3}
...state 等于 1,2,3

3.组件onPress事件参数
参数类型ResponderSyntheticEvent
可能通过e.nativeEvent获取坐标信息 结构{identifier,timeStamp,locationY, locationX,pageX,pageY,target}
target是数字

4.组件onLayout事件参数
参数类型SyntheticEvent
可能通过e.nativeEvent.layout获取坐标信息 结构 {height, width, y.5, x}

 

5.一个组件引用js对像的bug

<View style={[styles.circle,this._circleStyles]}/>

//用这种方式无法取到样式
this._circleStyles.left = this._previousLeft + gestureState.dx;
this._circleStyles.top = this._previousTop + gestureState.dy;

//用这种可以

this._circleStyles = {
left: this._previousLeft + gestureState.dx,
top: this._previousTop + gestureState.dy
};

 

6.ref和refs
组件中render生成的标签可以通过ref属性设置字段名称。在组件中可以通过this.refs['myRefString']或this.refs.myRefString引用对应标签

 

render: function() {
return <Text ref="myInput" />;
},
componentDidMount: function() {
this.refs['myInput']
this.refs.myInput
}

//ref也可以做为回调函数,回调参数为标签的引用
render: function() {
return <Text ref={(c) => this._input = c} />;
},
componentDidMount: function() {
this._input.focus();
}

 

 

7.View层级,后面的覆盖前面的。

8.没有module.exports用 import

比如import PickerAndroid from 'react-native-picker-android';

9.如果打包有问题可以看

http://localhost:8081/index.android.bundle?platform=android

10.this.props.children获取元素下的子元素