React Native ： AsyncStorage 存储

React Native 初探 ： http://www.52php.cn/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);

效果图

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!