参考资料：http://www.cnblogs.com/shaoting/p/7148240.html
下一个项目公司也打算使用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,但是该库的导航条使用不了渐隐,于是只能在需要导航条渐隐的地方,改用自己定义的导航条.
基本代码如下:
1 /**
2 * Created by shaotingzhou on 2017/5/9.
3 */
4 import React, { Component } from 'react';
5 import {
6 AppRegistry,
7 StyleSheet,
8 Text,
9 View,
10 Image,
11 TouchableOpacity,
12 Platform,
13 Dimensions,
14 RefreshControl,
15 FlatList,
16 ActivityIndicator,
17 ScrollView,
18 TextInput
19 } from 'react-native';
20 var {width,height} = Dimensions.get('window');
21 var dataAry = []
22 var start = 0
23
24 export default class OneDetailsFlat extends Component{
25 //返回首页方法需要修改react-navigation库的源码.修改方法见:http://www.jianshu.com/p/2f575cc35780
26 static navigationOptions = ({ navigation }) => ({
27 header:null,
28 title: 'FlatList',
29 headerStyle:{backgroundColor:'rgba(255,255,255,0.0)'},
30 headerTintColor: 'black',
31 headerLeft:(
32 <Text onPress={()=>navigation.goBack("Tab")}>返回首页</Text>
33 ),
34 })
35
36 // 构造
37 constructor(props) {
38 super(props);
39 // 初始状态
40 for(start = 0;start<20;start++){
41 var obj = {}
42 obj.key = start
43 dataAry.push(obj)
44 }
45
46 this.state = {
47 opacity:0,
48 dataAry: dataAry,
50 };
51 }
52 render() {
53 return (
54 <View>
55 <FlatList
56 onScroll = {(e)=>{this.onScroll(e)}}
57 data = {this.state.dataAry}
58 renderItem = {(item) => this.renderRow(item)}
59 />
60 <View style={{width:width,height:69,alignItems:'center',flexDirection:'row',position:'absolute',top:0,backgroundColor:'rgba(122,233,111,' + this.state.opacity + ')'}}>
61 <Text style={{width:60,color:'red'}} onPress={()=>this.props.navigation.goBack(null)}>返回</Text>
62 </View>
63 </View>
64 );
65 }
66
67 //listView的renderRow
68 renderRow =(item) =>{
69 return(
70 <View style={{flexDirection:'row',marginTop:5,marginLeft:5,borderWidth:1,marginRight:5,borderColor:'#DEDEDE',backgroundColor:'white'}}>
71 <Image source={require('../image/one_selected.png')} style={{width:60,height:60,borderRadius:30,marginTop:5,marginBottom:5}}/>
72 <View style={{flexDirection:'column',justifyContent:'space-around',marginLeft:5}}>
73 <Text style={{fontSize:16}}>歌名: 彩虹彼岸</Text>
74 <View style={{flexDirection:'row'}}>
75 <Text style={{fontSize:14,color:'#BDBDBD'}}>歌手:虚拟歌姬</Text>
76 <Text style={{fontSize:14,color:'#BDBDBD',marginLeft:10}}>专辑:react native</Text>
77 </View>
78 </View>
79 </View>
80 )
81 }
82 onScroll =(e) =>{
83 let y = e.nativeEvent.contentOffset.y;
84 if(y < 10 ){
85 this.setState({
86 opacity:0
87 })
88 }else if( y <= 69 && y>= 10){
89 console.log(y/100)
90 this.setState({
91 opacity:y/100
92 })
93 }else {
94 this.setState({
95 opacity:1
96 })
97 }
98 }
99
100 };
101
102 var styles = StyleSheet.create({
103 container: {
104 flex: 1,
105 backgroundColor: '#F5FCFF',
106 },
107 welcome: {
108 fontSize: 20,
109 textAlign: 'center',
110 margin: 10,
111 },
112 instructions: {
113 textAlign: 'center',
114 color: '#333333',
115 marginBottom: 5,
116 }
117 });
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:我
