參考資料：http://www.cnblogs.com/shaoting/p/7148240.html 下一個項目公司也打算使用react native.大致看了下原型設計,寫幾個小demo先試試水.特此記錄下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付寶支付. 2.導航條漸 ...
參考資料：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,
},
});這個是數據:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 [{"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:我
您的分享是我們最大的動力!
-Advertisement- 更多相關文章
-Advertisement-
