React Native 繼續學習

時間 2019-12-20

標籤 react native 繼續學習欄目 React 简体版

原文原文鏈接

下一個項目公司也打算使用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條內容.