React Native八大Demo




 參考資料:http://www.cnblogs.com/shaoting/p/7148240.htmljavascript

下一個項目公司也打算使用react native.大體看了下原型設計,寫幾個小demo先試試水.特此記錄下.html

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

2.導航條漸隱react

3.通信錄git

4.卡片式輪播github

5.時間軸json

6.圖片+列表的組合效果react-native

7.圖片下拉放大微信

8.原生視頻播放器ide

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:我😆)......." ,
     "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能夠,可是和其餘組件搭配就錯誤.....)

 

複製代碼
  1 /**  2  * Created by shaotingzhou on 2017/7/6.  3 */  4 /**  5  * Sample React Native App  6  * https://github.com/facebook/react-native  7  * @flow  8 */  9  10 import React, { Component } from 'react';  11 import {  12  AppRegistry,  13  StyleSheet,  14  Text,  15  View,  16  ScrollView,  17  Dimensions,  18  FlatList,  19  SectionList,  20  Image,  21  ListView  22 } from 'react-native';  23 var {width,height} = Dimensions.get('window');  24 var dataAry = []  25 var dataAryOne = []  26 var dataAryTwo = []  27 var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=> r1 !== r2});  28  29 export default class Main extends Component {  30 // 構造  31  constructor(props) {  32  super(props);  33 // 初始狀態  34 for(var i = 0;i<100;i++){  35 var obj = {}  36 obj.key = i  37  dataAry.push(obj)  38  }  39  40 // 初始狀態  41 for(var i = 0;i<10;i++){  42 var obj = {}  43 obj.key = i  44  dataAryOne.push(obj)  45  }  46  47 // 初始狀態  48 for(var i = 0;i<5;i++){  49 var obj = {}  50 obj.key = i  51  dataAryTwo.push(obj)  52  }  53  54 this.state = {  55 index:1,  56  dataAry: dataAry,  57  dataAryOne:dataAryOne,  58  dataSource:ds.cloneWithRows(dataAryTwo)  59  };  60  }  61  62  render() {  63 return (  64 <View style={{flex:1}}>  65 <View style={{backgroundColor:'cyan',height:69,justifyContent:'center',alignItems:'center'}}>  66 <Text>導航條</Text>  67 </View>  68 <ScrollView  69 style={{flex:1}}  70 stickyHeaderIndices = {[1]}  71 >  72  73 <Image source={require('./1.gif')} style={{width:width,height:200}} />  74  75 <View style={{backgroundColor:'yellow'}}>  76 <View style={{flexDirection:'row',justifyContent:'space-around',marginTop:20}}>  77 <Text onPress={()=>{this.onClickOne()}} style={{color:this.state.index == 1 ? 'red' : 'cyan'}}>11111</Text>  78 <Text onPress={()=>{this.onClickTwo()}} style={{color:this.state.index == 2 ? 'red' : 'cyan'}}>22222</Text>  79 <Text onPress={()=>{this.onClickThree()}} style={{color:this.state.index == 3 ? 'red' : 'cyan'}}>33333</Text>  80 </View>  81 </View>  82  83 {this.bottomViewRender()}  84  85 </ScrollView>  86  87 </View>  88  );  89  }  90 bottomViewRender = ()=>{  91 if(this.state.index == 1){  92 return(  93 <FlatList  94 data = {this.state.dataAry} 95 renderItem = {(item) => this.renderRow(item)} 96 /> 97 ) 98 }else if(this.state.index == 2){ 99 return( 100 <FlatList 101 data = {this.state.dataAryOne} 102 renderItem = {(item) => this.renderRowOne(item)} 103 /> 104 ) 105 }else { 106 //這裏橫向只能使用ListView或者SctionList.FLatList設置橫向屬性報錯 107 return( 108 <ListView 109 dataSource={this.state.dataSource} 110 renderRow={this.renderRowTwo} 111 contentContainerStyle={styles.listViewStyle} 112 /> 113 ) 114 } 115 116 } 117 118 119 onClickOne =()=>{ 120 this.setState({ 121 index:1, 122 }) 123 } 124 onClickTwo =()=>{ 125 this.setState({ 126 index:2, 127 }) 128 } 129 onClickThree =()=>{ 130 this.setState({ 131 index:3, 132 }) 133 } 134 135 136 renderRow =(item) =>{ 137 return( 138 <View style={{flexDirection:'row',marginTop:5,marginLeft:5,borderWidth:1,marginRight:5,borderColor:'#DEDEDE',backgroundColor:'white'}}> 139 <View style={{flexDirection:'column',justifyContent:'space-around',marginLeft:5}}> 140 <Text style={{fontSize:16}}>歌名: 彩虹彼岸</Text> 141 <View style={{flexDirection:'row'}}> 142 <Text style={{fontSize:14,color:'#BDBDBD'}}>歌手:虛擬歌姬</Text> 143 <Text style={{fontSize:14,color:'#BDBDBD',marginLeft:10}}>專輯:react native</Text> 144 </View> 145 </View> 146 </View> 147 ) 148 149 } 150 151 renderRowOne =(item) =>{ 152 return( 153 <View style={{flexDirection:'row',marginTop:5,marginLeft:5,borderWidth:1,marginRight:5,borderColor:'#DEDEDE',backgroundColor:'white'}}> 154 <View style={{flexDirection:'row'}}> 155 <Text style={{fontSize:14,color:'#BDBDBD'}}>歌手:虛擬歌姬</Text> 156 <Text style={{fontSize:14,color:'#BDBDBD',marginLeft:10}}>專輯:react native</Text> 157 </View> 158 </View> 159 ) 160 161 } 162 163 renderRowTwo(rowData){ 164 return( 165 <View style={styles.innerViewStyle}> 166 <Image source={require('./2.jpeg')} style={{width:150,height:150}} /> 167 <Text>你的名字</Text> 168 </View> 169 ); 170 } 171 // 172 // renderRowTwo =(item) =>{ 173 // 174 // return ( 175 // <View> 176 // { 177 // dataAryTwo.map(function (item, i) { 178 // return ( 179 // <View style={{marginLeft:5}} key={i}> 180 // <Image source={require('./2.jpeg')} style={{width:150,height:150}} /> 181 // <Text>你的名字</Text> 182 // </View> 183 // ); 184 // }) 185 // } 186 // </View> 187 // ) 188 // } 189 190 191 } 192 193 const styles = StyleSheet.create({ 194 container: { 195 flex: 1, 196 justifyContent: 'center', 197 alignItems: 'center', 198 backgroundColor: '#F5FCFF', 199 }, 200 welcome: { 201 fontSize: 20, 202 textAlign: 'center', 203 margin: 10, 204 }, 205 instructions: { 206 textAlign: 'center', 207 color: '#333333', 208 marginBottom: 5, 209 }, 210 listViewStyle:{ 211 //改變主軸方向 212 flexDirection:'row', 213 //多行顯示 214 flexWrap:'wrap' 215 }, 216 });
複製代碼

 

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中遇到幾個難點:

10.倒計時:https://github.com/kkkelicheng/ReactNative-CountDownButton

優勢:  不會由於進入後臺而中止讀秒

         支持同個頁面再次進入時,智能的判斷讀秒時間,顯示是否繼續計時

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

12.由於下個項目是有關狗狗的,頁面加載須要一個指示器.在不考慮性能上暫時使用gif圖+Modal實現.

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
/**
  * 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條內容.

相關文章
相關標籤/搜索