React-Native开发总结-组件高级使用方案汇总

最近更新时间：2018年03月01日11:40:10

《我的博客地图》

    一门技术的实践，需要反复的思考，react-native本身封装了html类型的很多易用性组件并对外暴露，组件很好，但能否很好的驾驭组件，是考量一名工程师的水准。我一直践行从实际中寻找问题。

1、AsyncStorage

    存数据：

AsyncStorage.setItem('name','wanshaobo');

    获取数据：

AsyncStorage.getItem('name').then((res)=>{

console.log(res);//wanshaobo'
});

    删除数据：

AsyncStorage.removeItem('name');

    注意事项，setItem和removeItem方法，虽然返回一个Promise对象，但没有意义，不会返回任何东西，如下：

AsyncStorage.setItem('name').then((res)=>{
console.log(res);//null
}).then((err)=>{
console.log(err);//undefined
});

AsyncStorage.removeItem('name').then((res)=>{
console.log(res);//null
}).then((err)=>{
console.log(err);//undefined
});

    如果，在没有意义的两个resolve()和reject()的回调方法中书写语句，不仅更没有意义，还会导致页面发生错误(在两个then回调中书写语句，导致函数报错，直接触发页面的生命周期方法重新执行，componentWillMount-render-componentDidMount)。

2、PermissionsAndroid

    在常规开发过程，APP经常会和硬件交互，这就需要判断用户是否开启权限，以及如何软件操作请求权限。判断权限是否开启的方法PermissionsAndroid.check，请求开启权限的方法PermissionsAndroid.request。

    权限一般包括：短信与彩信、电话与联系人、定位、获取手机信息、访问日历、相机、录音、读写手机存储、系统设置、开启WiFi、开启蓝牙等

    案例：定位权限

//判断是否开启定位权限
let locationStatus = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
if(!locationStatus){
 //请求用户开启权限
 let granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
 console.log('granted',granted);//never_ask_again granted
 if(granted == 'never_ask_again'){
   alert('您设置了从不开启权限，请去权限管理手动开启！')
 }
}

    如果弹出'您设置了从不开启权限，请去权限管理手动开启！'，说明该项目底层Android代码没有配置该功能的权限，此时在手机的权限管理中是无法找到该应用的，即无法软件开启。需要做如下配置，在项目目录文件夹中修改这个文件内容/Users/wanshaobo/project/app/android/app/src/main/AndroidManifest.xml，比如要开启录音功能，在这个文件中加入代码如下：

    各个权限的英文字码对应如下：

获取粗略定位

ACCESS_COARSE_LOCATION:"android.permission.ACCESS_COARSE_LOCATION"

获取精确定位
ACCESS_FINE_LOCATION:"android.permission.ACCESS_FINE_LOCATION"
ADD_VOICEMAIL:"com.android.voicemail.permission.ADD_VOICEMAIL"
BODY_SENSORS:"android.permission.BODY_SENSORS"

CALL_PHONE:"android.permission.CALL_PHONE"

拍照和录像
CAMERA:"android.permission.CAMERA"
GET_ACCOUNTS:"android.permission.GET_ACCOUNTS"
PROCESS_OUTGOING_CALLS:"android.permission.PROCESS_OUTGOING_CALLS"
READ_CALENDAR:"android.permission.READ_CALENDAR"
READ_CALL_LOG:"android.permission.READ_CALL_LOG"
READ_CONTACTS:"android.permission.READ_CONTACTS"
READ_EXTERNAL_STORAGE:"android.permission.READ_EXTERNAL_STORAGE"

电话
READ_PHONE_STATE:"android.permission.READ_PHONE_STATE"

短信
READ_SMS:"android.permission.READ_SMS"
RECEIVE_MMS:"android.permission.RECEIVE_MMS"
RECEIVE_SMS:"android.permission.RECEIVE_SMS"
RECEIVE_WAP_PUSH:"android.permission.RECEIVE_WAP_PUSH"

录音功能
RECORD_AUDIO:"android.permission.RECORD_AUDIO"
SEND_SMS:"android.permission.SEND_SMS"
USE_SIP:"android.permission.USE_SIP"
WRITE_CALENDAR:"android.permission.WRITE_CALENDAR"
WRITE_CALL_LOG:"android.permission.WRITE_CALL_LOG"
WRITE_CONTACTS:"android.permission.WRITE_CONTACTS"

访问照片和文件和存储

WRITE_EXTERNAL_STORAGE:"android.permission.WRITE_EXTERNAL_STORAGE"

3、Image

    图片动态加载的方案，图片不能使用如下方案：

let data = './icon.png'

require(data)} />

    必须采用如下方案：

let data = require('./icon.png')

4、FlatList

    这个组件的传入的数据data = {item:'',index:''}，自己封装有index，可以很好的使用；

  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item,index}) => {item.key}}

/>

5、Touchable系列组件

  该系列组件有四个：TouchableHighlight、TouchableNativeFeedBack、TouchableOpacity、TouchableWithoutFeedback

  每个组件都有如下属性和方法：onLongPress、onPress、onPressLn、onPressOut

  注意事项：onPressOut事件，手指离开按钮，或者手指在按钮上滑动，均可触发这个事件。

6、PanResponder手势响应系统

用法一：

    onStartShouldSetResponder={(evt) => true}//允许该View组件成为响应者

    onResponderGrant={this.onResponderGrant}//手指刚触摸

    onResponderMove={this.onResponderMove}//手指在移动

    onResponderRelease={this.onResponderRelease}//手指离开屏幕

>

用法二：

//注册全局滚动到顶部的手势响应

componentWillMount(){

this._panResponderGlobal = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderGrant: ()=>{},
onPanResponderMove: (evt, gestureState)=>{},
onPanResponderRelease: (evt, gestureState)=>{},

});

}

未完，待续...