React Native 繼續學習
下一個項目公司也打算使用react native.大體看了下原型設計,寫幾個小demo先試試水.特此記錄下.javascript
1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付寶支付.html
2.導航條漸隱java
3.通信錄react
4.卡片式輪播git
5.時間軸github
6.圖片+列表的組合效果json
7.圖片下拉放大react-native
8.原生視頻播放器微信
9.react-navigation的使用和變動ide
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-smart-alipay 或者 react-native-payment-alipay 或者 react-native-alipay
微信支付: react-native-wechat
想要秀操做,經過交互原生支付也能夠.
大神剛出爐的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:我😆).......",
"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中遇到幾個難點:
- 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條內容.
相關文章
- 1. React-Native 學習
- 2. react-native學習
- 3. 繼續學習
- 4. react native 學習之 native modules
- 5. react-native學習---react-native佈局
- 6. React Native學習----react-native-webview-bridge
- 7. React Native學習－CameraRoll
- 8. react native的學習
- 9. React Native 學習三
- 10. React Native學習二
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
