React Native 继续学习

下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下.

1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付.

2.导航条渐隐

3.通讯录

4.卡片式轮播

5.时间轴

6.图片+列表的组合效果

7.图片下拉放大

8.原生视频播放器

9.react-navigation的使用和变更

10.倒计时

11.多张图片查看

12.自定义页面加载指示器

......

1.微信及朋友圈分享,微信支付: https://github.com/yorkie/react-native-wechat

QQ分享:https://github.com/reactnativecn/react-native-qq

微博分享: https://github.com/reactnativecn/react-native-weibo

支付宝支付没有找到,只能跳转原生进行支付.

大神刚出炉的React Native 分享功能封装【一行代码，双平台分享】 支持平台：【QQ】【QQ空间】【微信】【朋友圈】【微博】 https://github.com/songxiaoliang/react-native-share

2.导航条渐隐,该项目我们打算使用react-navigation,但是该库的导航条使用不了渐隐,于是只能在需要导航条渐隐的地方,改用自己定义的导航条.

基本代码如下:

/**
* Created by shaotingzhou on 2017/5/9.
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
Platform,
Dimensions,
RefreshControl,
FlatList,
ActivityIndicator,
ScrollView,
TextInput
} from 'react-native';
var {width,height} = Dimensions.get('window');
var dataAry = []
var start  = 0

export default class OneDetailsFlat extends Component{
//返回首页方法需要修改react-navigation库的源码.修改方法见:http://www.jianshu.com/p/2f575cc35780
static navigationOptions = ({ navigation }) => ({
header:null,
title: 'FlatList',
headerStyle:{backgroundColor:'rgba(255,255,255,0.0)'},
headerTintColor: 'black',
headerLeft:(
<Text onPress={()=>navigation.goBack("Tab")}>返回首页</Text>
),
})

// 构造
constructor(props) {
super(props);
// 初始状态
for(start = 0;start<20;start++){
var obj = {}
obj.key = start
dataAry.push(obj)
}

this.state = {
opacity:0,
dataAry: dataAry,
};
}
render() {
return (
<View>
<FlatList
onScroll = {(e)=>{this.onScroll(e)}}
data = {this.state.dataAry}
renderItem = {(item) => this.renderRow(item)}
/>
<View style={{width:width,height:69,alignItems:'center',flexDirection:'row',position:'absolute',top:0,backgroundColor:'rgba(122,233,111,' + this.state.opacity + ')'}}>
<Text style={{width:60,color:'red'}} onPress={()=>this.props.navigation.goBack(null)}>返回</Text>
</View>
</View>
);
}

//listView的renderRow
renderRow =(item) =>{
return(
<View style={{flexDirection:'row',marginTop:5,marginLeft:5,borderWidth:1,marginRight:5,borderColor:'#DEDEDE',backgroundColor:'white'}}>
<Image source={require('../image/one_selected.png')} style={{width:60,height:60,borderRadius:30,marginTop:5,marginBottom:5}}/>
<View style={{flexDirection:'column',justifyContent:'space-around',marginLeft:5}}>
<Text style={{fontSize:16}}>歌名: 彩虹彼岸</Text>
<View style={{flexDirection:'row'}}>
<Text style={{fontSize:14,color:'#BDBDBD'}}>歌手:虚拟歌姬</Text>
<Text style={{fontSize:14,color:'#BDBDBD',marginLeft:10}}>专辑:react native</Text>
</View>
</View>
</View>
)
}
onScroll =(e) =>{
let y = e.nativeEvent.contentOffset.y;
if(y < 10 ){
this.setState({
opacity:0
})
}else if( y <= 69 && y>= 10){
console.log(y/100)
this.setState({
opacity:y/100
})
}else {
this.setState({
opacity:1
})
}
}

};

var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
}
});

3.通讯录采用三方库即可满足.https://github.com/sunnylqm/react-native-alphabetlistview

4.卡片式轮播采用三方库即可满足.https://github.com/archriss/react-native-snap-carousel

5.时间轴效果. 该效果采用FlatList打造即可.

/**
* Created by shaotingzhou on 2017/7/10.
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
FlatList,
Dimensions,
Image
} from 'react-native';
var {width,height} = Dimensions.get('window');
var dataAry = []
import data from './data.json'
export default class TimerShaft extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
dataAry: dataAry,
};
}

render() {
return (
<View style={{marginTop:30}}>
<FlatList
data = {this.state.dataAry}
renderItem = {(item) => this.renderRow(item)}
keyExtractor={this.keyExtractor}
/>
<View style={{width:1,height:height,backgroundColor:'red',position:'absolute',left:50}}></View>
</View>
);
}

renderRow =(item) =>{
if(item.item.text){
return(
<View style={{marginBottom:10,marginLeft:60}}>
<Text>{item.item.text}</Text>
</View>
)
}else{
return(
<View style={{flexDirection:'row',marginBottom:10}}>
{/*左边*/}
<View style={{width:60,marginBottom:10}}>
<View style={{flexDirection:'row',alignItems:'center'}}>
<Text>{item.item.time}</Text>
<View style={{width:10,height:10,borderRadius:5,backgroundColor:'red',position:'absolute',left:45}}></View>
</View>
</View>
{/*右边*/}
<View style={{backgroundColor:"#F2F2F2",marginLeft:5,width:width-70}} onLayout = {(event)=>this.onLayout(event)} >
<Text style={{}}>{item.item.content}</Text>
<View style={{flexDirection:'row',flexWrap:'wrap'}}>
{this.renderImg(item.item.image)}
</View>
</View>
</View>
)

}

}

keyExtractor(item: Object, index: number) {
return item.id
}

onLayout = (event)=>{
console.log(event.nativeEvent.layout.height)
}

renderImg = (imgAry) =>{
var renderAry = []
for(var i = 0;i < imgAry.length; i++){
if(imgAry.length == 1){
renderAry.push(
<Image key={i} source={{uri:imgAry[0].url}} style={{width:200,height:200}}/>
)
}else if(imgAry.length == 2 || imgAry.length == 4){
renderAry.push(
<Image key={i} source={{uri:imgAry[i].url}} style={{width:(width-70)*0.5-2,height:(width-70)*0.5-2,marginLeft:1,marginTop:1}}/>
)
}else {
renderAry.push(
<Image key={i} source={{uri:imgAry[i].url}} style={{width:(width-70)/3-2,height:(width-70)/3-2,marginLeft:1,marginTop:1}}/>
)
}
}

return renderAry
}

componentDidMount() {
this.setState({
dataAry:data
})
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

这个是数据:

[
{
"id":1,
"time":"01-05",
"content":"今天,带二哈去节育,再不节育的话,就要被泰迪榨干了(ps:只有累死的牛,没有耕坏的地),关键一路上,那只小区里面的泰迪一路尾随.....这..这个.这是哪个女人养的泰迪,请告诉我你的职业和联系方式,你对我二哈做的,我十倍还你!!!夕阳西下,俩狗一路走,二哈好像知道自己的下场,一脸委屈的看着我,就像许仙看法海似得看着我,二哈,不是哥不成全你们俩,而是哥看着你心疼啊...........",
"image":[
{
"imageId":47,
"url":"https://ws1.sinaimg.cn/mw690/610dc034ly1ffwb7npldpj20u00u076z.jpg"
}
]
},
{
"id":2,
"time":"01-04",
"content":"今天在家躺尸,二哈在家吃刚买的狗粮,我蹲在旁边看着它吃,二哈看看我,看看碗,于是往旁边挪了挪",
"image":[
{
"imageId":3,
"url":"https://ws1.sinaimg.cn/large/610dc034gy1fh9utulf4kj20u011itbo.jpg"
},
{
"imageId":4,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fh8ox6bmjlj20u00u0mz7.jpg"
},
{
"imageId":5,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fh7hwi9lhzj20u011hqa9.jpg"
},
{
"imageId":6,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fgj7jho031j20u011itci.jpg"
}
]
},
{
"id":3,
"time":"01-03",
"content":"今天上班,把狗丢在家里,回来家没了~~~",
"image":[
{
"imageId":7,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fgi3vd6irmj20u011i439.jpg"
},
{
"imageId":8,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fgepc1lpvfj20u011i0wv.jpg"
},
{
"imageId":9,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fgchgnfn7dj20u00uvgnj.jpg"
},
{
"imageId":10,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fga6auw8ycj20u00u00uw.jpg"
},
{
"imageId":11,
"url":"https://ws1.sinaimg.cn/large/d23c7564ly1fg7ow5jtl9j20pb0pb4gw.jpg"
},
{
"imageId":12,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fgepc1lpvfj20u011i0wv.jpg"
},
{
"imageId":13,
"url":"https://ws1.sinaimg.cn/large/d23c7564ly1fg6qckyqxkj20u00zmaf1.jpg"
},
{
"imageId":14,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1ffyp4g2vwxj20u00tu77b.jpg"
},
{
"imageId":15,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1ffxjlvinj5j20u011igri.jpg"
}
]
},
{
"id":4,
"time":"01-02",
"content":"今天是2017年的第二天,两只单身狗在家附近的公园里的亭子躲雨,然后,来了只泰迪.然后亭子里就剩一只单身狗了(ps:我😆).......",
"image":[
{
"imageId":17,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fgdmpxi7erj20qy0qyjtr.jpg"
},
{
"imageId":27,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1ffla9ostxuj20ku0q2abt.jpg"
},
{
"imageId":37,
"url":"https://ws1.sinaimg.cn/large/d23c7564ly1fg6qckyqxkj20u00zmaf1.jpg"
}
]
},
{
"id":5,
"time":"01-01",
"content":"养狗前,钱是我的,养狗后,钱是它的~",
"image":[

]
},
{
"id":6,
"text":"2017"
},
{
"id":7,
"time":"12-28",
"content":"",
"image":[
{
"imageId":1,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fhegpeu0h5j20u011iae5.jpg"
},
{
"imageId":2,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fhb0t7ob2mj20u011itd9.jpg"
}
]
},
{
"id":8,
"time":"12-25",
"content":"今天下大雨,适合逛街,途中,遇见了一只二哈,于是花了2000买了下来",
"image":[
{
"imageId":47,
"url":"https://ws1.sinaimg.cn/large/610dc034ly1fgdmpxi7erj20qy0qyjtr.jpg"
}
]
}
]

　　



6.图片+列表的组合效果

该效果采用ScrollView包含两个FlatList和一个ListView完成(ps:第三个横向的cell的单独使用FlatList可以,但是和其他组件搭配就错误.....)

/**
* Created by shaotingzhou on 2017/7/6.
*/
/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Dimensions,
FlatList,
SectionList,
Image,
ListView
} from 'react-native';
var {width,height} = Dimensions.get('window');
var dataAry = []
var dataAryOne = []
var dataAryTwo = []
var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=> r1 !== r2});

export default class Main extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
for(var i = 0;i<100;i++){
var obj = {}
obj.key = i
dataAry.push(obj)
}

// 初始状态
for(var i = 0;i<10;i++){
var obj = {}
obj.key = i
dataAryOne.push(obj)
}

// 初始状态
for(var i = 0;i<5;i++){
var obj = {}
obj.key = i
dataAryTwo.push(obj)
}

this.state = {
index:1,
dataAry: dataAry,
dataAryOne:dataAryOne,
dataSource:ds.cloneWithRows(dataAryTwo)
};
}

render() {
return (
<View style={{flex:1}}>
<View style={{backgroundColor:'cyan',height:69,justifyContent:'center',alignItems:'center'}}>
<Text>导航条</Text>
</View>
<ScrollView
style={{flex:1}}
stickyHeaderIndices = {[1]}
>

<Image source={require('./1.gif')} style={{width:width,height:200}} />

<View style={{backgroundColor:'yellow'}}>
<View style={{flexDirection:'row',justifyContent:'space-around',marginTop:20}}>
<Text onPress={()=>{this.onClickOne()}} style={{color:this.state.index == 1 ? 'red' : 'cyan'}}>11111</Text>
<Text onPress={()=>{this.onClickTwo()}} style={{color:this.state.index == 2 ? 'red' : 'cyan'}}>22222</Text>
<Text onPress={()=>{this.onClickThree()}} style={{color:this.state.index == 3 ? 'red' : 'cyan'}}>33333</Text>
</View>
</View>

{this.bottomViewRender()}

</ScrollView>

</View>
);
}
bottomViewRender = ()=>{
if(this.state.index == 1){
return(
<FlatList
data = {this.state.dataAry}
renderItem = {(item) => this.renderRow(item)}
/>
)
}else if(this.state.index == 2){
return(
<FlatList
data = {this.state.dataAryOne}
renderItem = {(item) => this.renderRowOne(item)}
/>
)
}else {
//这里横向只能使用ListView或者SctionList.FLatList设置横向属性报错
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRowTwo}
contentContainerStyle={styles.listViewStyle}
/>
)
}

}

onClickOne =()=>{
this.setState({
index:1,
})
}
onClickTwo =()=>{
this.setState({
index:2,
})
}
onClickThree =()=>{
this.setState({
index:3,
})
}

renderRow =(item) =>{
return(
<View style={{flexDirection:'row',marginTop:5,marginLeft:5,borderWidth:1,marginRight:5,borderColor:'#DEDEDE',backgroundColor:'white'}}>
<View style={{flexDirection:'column',justifyContent:'space-around',marginLeft:5}}>
<Text style={{fontSize:16}}>歌名: 彩虹彼岸</Text>
<View style={{flexDirection:'row'}}>
<Text style={{fontSize:14,color:'#BDBDBD'}}>歌手:虚拟歌姬</Text>
<Text style={{fontSize:14,color:'#BDBDBD',marginLeft:10}}>专辑:react native</Text>
</View>
</View>
</View>
)

}

renderRowOne =(item) =>{
return(
<View style={{flexDirection:'row',marginTop:5,marginLeft:5,borderWidth:1,marginRight:5,borderColor:'#DEDEDE',backgroundColor:'white'}}>
<View style={{flexDirection:'row'}}>
<Text style={{fontSize:14,color:'#BDBDBD'}}>歌手:虚拟歌姬</Text>
<Text style={{fontSize:14,color:'#BDBDBD',marginLeft:10}}>专辑:react native</Text>
</View>
</View>
)

}

renderRowTwo(rowData){
return(
<View style={styles.innerViewStyle}>
<Image source={require('./2.jpeg')} style={{width:150,height:150}} />
<Text>你的名字</Text>
</View>
);
}
//
// renderRowTwo =(item) =>{
//
//     return (
//         <View>
//             {
//                 dataAryTwo.map(function (item, i) {
//                 return (
//                     <View style={{marginLeft:5}} key={i}>
//                         <Image source={require('./2.jpeg')} style={{width:150,height:150}} />
//                         <Text>你的名字</Text>
//                     </View>
//                 );
//             })
//             }
//         </View>
//     )
// }

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
listViewStyle:{
//改变主轴方向
flexDirection:'row',
//多行显示
flexWrap:'wrap'
},
});

7.图片上拉放大:https://github.com/lelandrichardson/react-native-parallax-view

8.原生视频播放器:https://github.com/cornedor/react-native-video-player

9.react-navigation的使用和变更:

使用介绍: http://www.jianshu.com/p/2f575cc35780

demo: https://github.com/pheromone/navigationDemo

在使用react-navigation中遇到几个难点:

1.跳至相应路由(如返回首页功能). http://www.jianshu.com/p/2f575cc35780

2.防止点击过快,跳界面两次. https://github.com/react-community/react-navigation/pull/1348/files

3.static中使用this. http://www.jianshu.com/p/2f575cc35780

10.倒计时:https://github.com/kkkelicheng/ReactNative-CountDownButton

优点: 不会因为进入后台而停止读秒

支持同个页面再次进入时，智能的判断读秒时间，显示是否继续计时

11.多张图片查看:https://github.com/ascoders/react-native-image-viewer

12.因为下个项目是有关狗狗的,页面加载需要一个指示器.在不考虑性能上暂时使用gif图+Modal实现.

/**
* Sample React Native App
* https://github.com/facebook/react-native * @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Modal,
Image,
Dimensions
} from 'react-native';
var {width,height} = Dimensions.get('window');

export default class model extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
visible:true
};
}
render() {
return (
<View>
<Modal
visible={this.state.visible}    // 根据isModal决定是否显示
>
<View style={{backgroundColor:'rgba(0,0,0,0.4)',width:width,height:height,justifyContent:'center',alignItems:'center'}}>
<Image source={require('./food.gif')} style={{width:120,height:120,borderRadius:5}}/>
<Text style={{color:'white'}}>狗生思考中...</Text>
</View>
</Modal>
</View>
);
}

componentDidMount() {
//模拟请求数据,请求OK,把visible置为false即可
this.timer = setTimeout(
() => {
this.setState({
visible:false
})
},
1000
);
}

componentWillUnmount() {
this.timer && clearTimeout(this.timer);
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

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

　　


其中,关于Android下使用gif图需要简单配置下,请查看http://www.cnblogs.com/shaoting/p/5934725.html的第25条内容.