React Native : AsyncStorage 存储

前端之家收集整理的这篇文章主要介绍了React Native : AsyncStorage 存储前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React Native 初探 : http://www.jb51.cc/article/p-wtukbzxm-bob.html

AsyncStorage 的介绍见: http://reactnative.cn/docs/next/asyncstorage.html
这是一个kv存储,key和value都是字符串。当然value可以使用字符串形式的xml、json等。

这里顺便试用下 https://github.com/larsvinter/react-native-awesome-button 和ToastAndroid。

npm install react-native-awesome-button --save

代码

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,View,AsyncStorage,ToastAndroid
} from 'react-native';

import AwesomeButton from 'react-native-awesome-button';

const KEY = 'name';


const styles = StyleSheet.create({
  container: {
    // flex: 1,// flexDirection: 'column',alignItems: 'center',justifyContent: 'center',margin: 20,backgroundColor: '#F5FCFF',},buttonBackground: {
    height: 40,width: 200,borderRadius: 5,margin: 20
  },});


class MyReactNativeProject extends Component {

  _setValue() {
    console.log('set value');
    AsyncStorage.setItem(KEY,'letian',(err,result) => {
      console.log('set: err?',err,'; result?',result);
      if (err) {
        ToastAndroid.show('set发生错误',ToastAndroid.SHORT);
      }
      else {
        ToastAndroid.show('成功set',ToastAndroid.SHORT);
      }
    });
  }

  _getValue() {
    console.log('get value');
    AsyncStorage.getItem(KEY).then((value) => {
      console.log('value is: ',value);
      ToastAndroid.show('value is ' + value,ToastAndroid.SHORT)
    });
  }

  render() {

    return (
      <View style={styles.container}>

        <AwesomeButton 
            backgroundStyle={styles.buttonBackground}
            states={{
                default: {
                  text: 'set',onPress: this._setValue,backgroundColor: '#1155DD'
                }
              }}
        />
        <AwesomeButton 
            backgroundStyle={styles.buttonBackground}
            states={{
                default: {
                  text: '取',onPress: this._getValue,backgroundColor: '#1155DD'
                }
              }}
        />
      </View>
    );
  }
}



AppRegistry.registerComponent('MyReactNativeProject',() => MyReactNativeProject);

效果

原文链接:https://www.f2er.com/react/305812.html

猜你在找的React相关文章