react-native-image-picker上传头像 + modal浮层 +AsyncStorage.setItem-getItem

来源：互联网发布：遗传算法的基本思想编辑：程序博客网时间：2024/05/20 05:23

(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    }});

作者：省局到
链接：http://www.jianshu.com/p/04dfef54645c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

阅读全文

0 0