React Native学习之路(10) - (react-na
2017-07-30 本文已影响287人
woow_wu7
(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
}
});
