React Native 第十一天

37、AsyncStorage

用于本地存储数据

export default class ExampleCode extends Component {    async tongbuGet() {        let name = await AsyncStorage.getItem('name1');        alert(name);    }    async getKeys() {        let keys = await AsyncStorage.getAllKeys();        alert(keys);    }    constructor(props) {        super(props);        this.state = {}    }    render() {        return (            <View style={styles.container}>                <TouchableOpacity                    onPress={()=> {                        try {                            var json = {                                name: 'hpc'                            }                            AsyncStorage.setItem('name1', JSON.stringify(json), (err)=> {                                if (err == null) {                                    alert('设置成功');                                }                            })                        } catch (e) {                        }                    }}                >                    <Text>{'设置'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        //获取到了再返回                        AsyncStorage.getItem('name1', (err, value)=> {                            if (err == null) {                                alert(value);                            } else {                                alert(err);                            }                        })                    }}                >                    <Text>{'异步获取'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={this.tongbuGet.bind(this)}                >                    <Text>{'同步获取'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        AsyncStorage.removeItem('name1', (err)=> {                            if (err == null) {                                alert("删除成功")                            } else {                                alert(err)                            }                        });                    }}                >                    <Text>{'删除'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        try {                            var json1 = {                                name: 'hpc',                                url: 'www.baidu.com'                            }                            //假设已有的值和新的值都是字符串化的JSON，则将两个值合并                            AsyncStorage.mergeItem('name1', JSON.stringify(json1));                        } catch (e) {                            alert(e);                        }                    }}                >                    <Text>{'合并'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        AsyncStorage.clear((err)=> {                        })                    }}                >                    <Text>{'清空'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        AsyncStorage.getAllKeys((err, keys)=> {                            alert(keys);                        })                    }}                >                    <Text>{'异步获取所有的keys'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={this.getKeys.bind(this)}                >                    <Text>{'同步获取所有的keys'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        AsyncStorage.multiSet([['key1', 'value1'], ['key2', 'value2']], (err)=> {                        })                    }}                >                    <Text>{'批量设置'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        AsyncStorage.multiGet(['key1', 'key2'], (err, value)=> {                            for (var a in value) {                                alert(value[a][1]);                            }                        })                    }}                >                    <Text>{'批量获取'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        AsyncStorage.multiRemove(['key1']);                    }}                >                    <Text>{'批量删除'}</Text>                </TouchableOpacity>                <TouchableOpacity                    onPress={()=> {                        //合并只能针对于jsonObject对象类型的字符串                        AsyncStorage.multiMerge()                    }}                >                    <Text>{'批量合并'}</Text>                </TouchableOpacity>            </View>        )    }}

38、InteractionManager

可以将一些耗时较长的工作安排到所有互动或者动画完成之后再进行,这样可以保证js动画的流畅.

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {}    }    componentDidMount() {        //等循环结束后才执行输出last        InteractionManager.runAfterInteractions(()=>{            console.log("last");        })        for (var a = 0; a < 10; a++) {            console.log(a);        }    }    render() {        return (            <View style={styles.container}>                <Text>{'sss'}</Text>            </View>        )    }}

39、Vibration(震动)

Android需要配置权限

export default class D20170504 extends Component {    render() {      return (        <View style={styles.container}>          {            /**            * 需要真机测试            * ios 支持一次震动            * android 支持一次和多次震动            */          }          <Text onPress={()=>{              Vibration.vibrate();            }}>{'一次震动'}</Text>          <Text onPress={()=>{              // 第一个 500 为震动 500 毫秒              // 200 为震动以后间隔 200 毫秒              // 第二个 500 间隔后在震动500 毫秒              Vibration.vibrate([0,500,200,500]);            }}>{'震动模式/android'}</Text>          <Text onPress={()=>{              //第二个参数为true = 连续/重复震动              Vibration.vibrate([0,500,200,500],true);            }}>{'重复震动/android'}</Text>      </View>      );    }  }  

40、PixelRatio

提供了访问设备像素密度

export default class D20170504 extends Component {    render() {      return (        <View style={styles.container}>          <Text onPress={()=>{              //3              alert(PixelRatio.get());          }}>{'像素密度'}</Text>          <Text onPress={()=>{              alert(PixelRatio.getPixelSizeForLayoutSize(200));          }}>{'通过逻辑像素来计算物理的像素'}</Text>          <Text style={{fontSize:10}} onPress={()=>{              alert(PixelRatio.getFontScale());          }}>{'获得字体缩放的比例'}</Text>        </View>      );    }  }  

41、DrawableLayoutAndroid

export default class ExampleCode extends Component {    constructor(props) {        super(props);        this.state = {}    }    render() {        return (            <View style={{flex: 1}}>                <DrawerLayoutAndroid                    onDrawerClose={()=> {                        alert("close");                    }}                    onDrawerOpen={()=> {                        alert("open");                    }}                    onDrawerSlide={()=>{                        alert("slide");                    }}                    drawerLockMode={'locked-closed'}//不允许手势关闭侧边栏,还有locked-opened                    ref={'DrawerLayoutAndroid'}//相当于id                    drawerBackgroundColor={'green'}                    drawerPosition={DrawerLayoutAndroid.positions.Left}                    drawerWidth={100}                    renderNavigationView={()=> {                        return (                            <View style={{flex: 1, backgroundColor: 'red'}}>                                <Text>1</Text>                                <Text>2</Text>                            </View>                        )                    }}                >                    <View style={{flex: 1}}>                        <Text>{'默认显示的内容'}</Text>                        <Text onPress={()=> {                            this.refs['DrawerLayoutAndroid'].openDrawer(0);                        }}>{'打开抽屉'}</Text>                    </View>                </DrawerLayoutAndroid>                <View>                    <Text onPress={()=> {                      this.refs['DrawerLayoutAndroid'].closeDrawer(0);                    }}>{'关闭抽屉'}</Text>                </View>            </View>        )    }}