React Native学习之路(10) - (react-na

作者: woow_wu7 | 来源:发表于2017-07-30 00:56 被阅读287次

(1) AsyncStorage中存放的值都是字符串

----------
AsyncStorage.setItem("key","value") 和 AsyncStorage.getItem("key")

存放的都是字符串，所以取到KEY之后要用promise结构解析成对象
----------
如下：
AsyncStorage.getItem('user')
            .then( (data) => {
                if(data) {
                    var user = JSON.parse(data)
                }
                if( user && user.accessToken){
                    that.setState({
                        user: user
                    });
                }
            })

(2) react-native-image-picker

(1) 安装

npm install react-native-image-picker@latest --save

(2) android 配置

react-native link react-native-image-picker

(3) link 有时候未成功或缺少一些东西。(少文件可能会遇到闪退情况，踩过此坑)，具体怎么配置见下面两个链接
http://www.jianshu.com/p/c5b8c0f2459a
http://www.jianshu.com/p/977bc5eea1b1?utm_source=tuicool&utm_medium=referral
(4) 引入

import ImagePicker from 'react-native-image-picker';

(5) 使用

import ImagePicker from 'react-native-image-picker';

const { width,height } = Dimensions.get('window');


var options1 = {
    title: '上传头像',
    takePhotoButtonTitle:'拍照',
    cancelButtonTitle:'取消',
    chooseFromLibraryButtonTitle:'选择相册',
    quality:0.75,
    maxWidth: 600,
    maxHeight: 600,
    aspectX: 2,
    aspectY: 1,
    allowsEditing:true,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};
-----------------------------------------------
 _pickPhoto() {
        var that = this;
        // console.log(22222)
        ImagePicker.showImagePicker(options1, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {   //取消选择的时候，返回
                // console.log('User cancelled image picker');
                return
            }
            // console.log(response)    //是一个对象，里面有uri
            var avatarUri = response.uri;
            // console.log(avatarUri);  //是一个字符串
            var user = that.state.user;

            user.avatar = avatarUri;

            that.setState({
                user: user
            });
            var user = this.state.user;
            // console.log(user)
            var NewImage = JSON.stringify(user)
            AsyncStorage.setItem('user',NewImage)   //AsyncStorage.setItem只能存字符串。所以要JSON.stringify
                                                    //把新的user保存在本地，在第一次组件加载完毕之后，即
                                                    //在componentDidMount的时候，取出来，第78行
            }
        );
    }
------------------------------------------------------
 <TouchableNativeFeedback onPress={ this._pickPhoto.bind(this) }>
                                <View style={ styles.modalAvatar} >
                                    <Image source={{ uri: user.avatar}} style={styles.avatarModal}></Image>
                                    <Text style={ styles.modalAvatarText}>设置头像</Text>
                                </View>
                            </TouchableNativeFeedback>

(Githubd地址)https://github.com/react-community/react-native-image-picker#options
http://www.jianshu.com/p/c5b8c0f2459a
http://www.jianshu.com/p/443e4546c3f4

效果图

(3) Modal浮层

(一) 属性：

(1) animationType 动画的类型

(1) slide:从底部进入
(2) fade:渐变进入
(3) 无动画
--------
例子：
animationType={"slide"}

(2) visible 是否显示（布尔值）

visible={this.state.showHide}  //一般用state的状态来控制

(3) transparent 是否使用透明度（布尔值）

transparent={true}
------------------
然后就可以在Modal的View中设置backgroundColor的透明度了。
------------------
<View style={{ backgroundColor:'rgba(0,0,0,0.5)',flex:1,zIndex:20}}>

(4) onShow 当Modal显示完毕后执行的回调函数

onShow={this._onShow.bind(this)}

(5) onRequestClose 当Modal销毁时执行的回掉函数

(二) 代码示例：

<Modal
                    animationType={"slide"}
                    transparent={true}
                    visible={this.state.showHide}
                    onRequestClose={() => {this._switchModal(false)}}
                    onShow={this._onShow.bind(this)}
                >
                    <View style={{ backgroundColor:'white',flex:1,zIndex:20}}>
                        <View>
                            <TouchableNativeFeedback onPress={ this._pickPhoto.bind(this) }>
                                <View style={ styles.modalAvatar} >
                                    <Image source={{ uri: user.avatar}} style={styles.avatarModal}></Image>
                                    <Text style={ styles.modalAvatarText}>设置头像</Text>
                                </View>
                            </TouchableNativeFeedback>

                            <View style={styles.xiugainicheng}>
                                <Text style={ styles.xiugainichengText}>修改昵称：</Text>
                                <TextInput
                                    placeholder={this.state.text}
                                    onChangeText={ (text) => {
                                        AsyncStorage.setItem('text',text)
                                        AsyncStorage.getItem('text')
                                            .then( (aa) => {
                                                this.setState({
                                                    text: aa
                                                }) //这里是text改变后的情况，还有第一次初始化也要保存在state中
                                            })
                                    }}
                                    style={{ width:300,padding: 0,fontSize: 16,flex:1,marginLeft: 10}}
                                    underlineColorAndroid="transparent"
                                >
                                </TextInput>
                            </View>

                            {/*返回箭头*/}
                            <TouchableNativeFeedback onPress={() => {
                                this._switchModal(false)
                            }}>
                                <View style={styles.close}>
                                    <Icon3 name="arrow-back" size={ 30} ></Icon3>
                                </View>
                            </TouchableNativeFeedback>

                        </View>
                    </View>
                </Modal>

（详细）http://www.jianshu.com/p/fa5814afac7d
http://www.jianshu.com/p/fa5814afac7d

效果图

完整代码：


import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    AsyncStorage,
    TouchableNativeFeedback,
    Modal,
    TextInput
} from 'react-native';

import Icon from 'react-native-vector-icons/SimpleLineIcons';
import Icon2 from 'react-native-vector-icons/SimpleLineIcons';
import Icon3 from 'react-native-vector-icons/MaterialIcons'

import ImagePicker from 'react-native-image-picker';

const { width,height } = Dimensions.get('window');


var options1 = {
    title: '上传头像',
    takePhotoButtonTitle:'拍照',
    cancelButtonTitle:'取消',
    chooseFromLibraryButtonTitle:'选择相册',
    quality:0.75,
    maxWidth: 600,
    maxHeight: 600,
    aspectX: 2,
    aspectY: 1,
    allowsEditing:true,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};




export default class ff extends Component {

    constructor(props){
        super(props)
        var user = this.props.user || {}  //是从index.android.js中传过来的user，是state
        this.state = {
            user: user,    //user是一个对象
            isNewAvatar: true,
            showHide: false,
            text: '',
        }
    }

    componentDidMount() {
        var that = this;
        AsyncStorage.getItem('user')
            .then( (data) => {
                // console.log(data)


                if(data) {
                    var user = JSON.parse(data)
                }

                // console.log(user)

                if( user && user.accessToken){
                    that.setState({
                        user: user
                    });
                }
            })
        //在组件第一次加载完毕后，要得到在AsyncStorage.setIetm()中的text的值。
        // 要分两种情况，一种是初始化的时候，一种是当TextInput总的text改变的时候，都要把state改过来
        AsyncStorage.getItem('text')
            .then( (aa) => {
                this.setState({
                    text: aa
                })
            })
    }

    _pickPhoto() {
        var that = this;
        // console.log(22222)
        ImagePicker.showImagePicker(options1, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {   //取消选择的时候，返回
                // console.log('User cancelled image picker');
                return
            }
            // console.log(response)    //是一个对象，里面有uri
            var avatarUri = response.uri;
            // console.log(avatarUri);  //是一个字符串
            var user = that.state.user;

            user.avatar = avatarUri;

            that.setState({
                user: user
            });
            var user = this.state.user;
            // console.log(user)
            var NewImage = JSON.stringify(user)
            AsyncStorage.setItem('user',NewImage)   //AsyncStorage.setItem只能存字符串。所以要JSON.stringify
                                                    //把新的user保存在本地，在第一次组件加载完毕之后，即
                                                    //在componentDidMount的时候，取出来，第78行
            }
        );
    }

    _switchModal(aa) {
        this.setState({
            showHide: aa
        });
    }

    // _onShow() {
    //     alert('打开了')
    // }
    render() {
        var user = this.state.user;
        return (
            <View style={styles.container}>

                {/* 弹出层 */}
                <Modal
                    animationType={"slide"}
                    transparent={true}
                    visible={this.state.showHide}
                    onRequestClose={() => {this._switchModal(false)}}
                    //onShow={this._onShow.bind(this)} 显示完毕调用的函数，139行
                >
                    <View style={{ backgroundColor:'white',flex:1,zIndex:20}}>
                        <View>
                            <TouchableNativeFeedback onPress={ this._pickPhoto.bind(this) }>
                                <View style={ styles.modalAvatar} >
                                    <Image source={{ uri: user.avatar}} style={styles.avatarModal}></Image>
                                    <Text style={ styles.modalAvatarText}>设置头像</Text>
                                </View>
                            </TouchableNativeFeedback>

                            <View style={styles.xiugainicheng}>
                                <Text style={ styles.xiugainichengText}>修改昵称：</Text>
                                <TextInput
                                    placeholder={this.state.text}
                                    onChangeText={ (text) => {
                                        AsyncStorage.setItem('text',text)
                                        AsyncStorage.getItem('text')
                                            .then( (aa) => {
                                                this.setState({
                                                    text: aa
                                                })
                                            })
                                    }}
                                    style={{ width:300,padding: 0,fontSize: 16,flex:1,marginLeft: 10}}
                                    underlineColorAndroid="transparent"
                                >
                                </TextInput>
                            </View>

                            {/*返回箭头*/}
                            <TouchableNativeFeedback onPress={() => {
                                this._switchModal(false)
                            }}>
                                <View style={styles.close}>
                                    <Icon3 name="arrow-back" size={ 30} ></Icon3>
                                </View>
                            </TouchableNativeFeedback>

                        </View>
                    </View>
                </Modal>


                <View style={ styles.top }>
                    <View style={ styles.imageContainer }>

                        {/*背景*/}
                        <Image source={ require('../avatar.png') } style={styles.avatarBackground} ></Image>

                        {/*设置icon*/}
                        <TouchableNativeFeedback onPress={ () => {
                            this._switchModal(true)
                        }} >
                            <View style={ styles.setIcon }>
                                <Icon name="settings" size={ 32 } color="white"></Icon>
                            </View>
                        </TouchableNativeFeedback>

                        {/*头像*/}
                        {
                            this.state.isNewAvatar
                            ?
                                <Image source={{ uri: user.avatar}} style={styles.avatar}></Image>
                            :
                                <Image source={ require('../girl.jpg') } style={styles.avatar}></Image>


                        }

                        {/*用户名*/}
                        <View style={ styles.avatarTextContainer}>
                            <Text style={ styles.avatarText1 }>{ this.state.text}</Text>
                        </View>

                    </View>

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    avatarBackground: {
        width:width,
        height:300,
        backgroundColor: 'blue',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems:'center',
        opacity:0.5
    },
    avatar: {
        width: 120,
        height:120,
        borderRadius:60,
        position:'absolute',
        top: 90,
        left: width/2-60
    },
    avatarText: {
        color: 'white',
        position:'absolute',
        bottom: 20,
        left: width/2-30,
        fontSize: 22
    },
    avatarTextContainer: {
        justifyContent:'center',
        alignItems:'center',
        position:'relative',
        bottom: 60,
    },
    avatarText1: {
        color:'white',
        fontSize: 20
    },
    setIcon: {
        position: 'absolute',
        top: 40,
        right: 50,
        zIndex:10
    },
    modalAvatar: {
        paddingTop:60,
        paddingBottom: 60,
        flexDirection:'column',
        justifyContent:'center',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.1)',
    },
    modalAvatarText: {
        fontSize: 16,
        marginTop:10
    },
    avatarModal:{
        width: 100,
        height: 100,
        borderRadius: 50
    },
    xiugainicheng: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 10,
        paddingTop:14,
        paddingBottom:14,
        borderBottomWidth: 1,
        borderBottomColor: 'rgba(0,0,0,0.1)'
    },
    xiugainichengText: {
        fontSize: 16,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
        marginTop: 2
    },
    close: {
        position: 'absolute',
        top:70,
        left: 30,
        padding:30
    }

});

React Native学习之路(10) - (react-na

(1) AsyncStorage中存放的值都是字符串

(2) react-native-image-picker

(3) Modal浮层

(一) 属性：

(二) 代码示例：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native开发经验集

React Native实践