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

Bertha 。 2022-06-02 12:11 188阅读 0赞

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

[《我的博客地图》][Link 1]

一门技术的实践，需要反复的思考，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，比如要开启录音功能，在这个文件中加入代码如下：

<uses-permission android:name="android.permission.RECORD\_AUDIO"/>

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

获取粗略定位

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'

<Image style=\{styles.icon\} source=\{ require(data)\} />

必须采用如下方案：

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

4、FlatList

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

<FlatList  
  data=\{\[\{key: 'a'\}, \{key: 'b'\}\]\}  
  renderItem=\{(\{item,index\}) => <Text>\{item.key\}</Text>\}

5、Touchable系列组件

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

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

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

6、PanResponder手势响应系统

用法一：

<View

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)=>\{\},

\});

未完，待续...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440