React Native八大Demo

2022-09-19 18:12:49

参考资料：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,但是该库的导航条使用不了渐隐,于是只能在需要导航条渐隐的地方,改用自己定义的导航条.

基本代码如下:

React Native八大Demo
  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 });
React Native八大Demo

React Native八大Demo

3.通讯录采用三方库即可满足.https://github.com/sunnylqm/react-native-alphabetlistview

4.卡片式轮播采用三方库即可满足.https://github.com/archriss/react-native-snap-carousel

5.时间轴效果. 该效果采用FlatList打造即可.

React Native八大Demo
/**
 * 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,
    },
});
React Native八大Demo

这个是数据:

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:我

热门专题

php 百世汇通sdk
train-images-idx3-ubyte&period;gz镜像下载
hive reduce怎么分的
html用table制作排行榜
91BT-最全磁力搜索引擎
mcode参数不存在 百度地图
anaconda完全入门指南
python中&bsol;r用法
grald bulid 乱码
键盘上没有Break
apollo 当前应用缺失环境
内置对象监听接口和属性监听接口有啥不同
programming cables驱动装不上
Delphi 结构体为什么要用指针
如何用c语言判断一个数的位数&comma;并按照相反的顺序输出
div如何调整文字位置
jquery switch开关 获取值
虚拟机ikuai搭建
torch&period;save读取
根据gene中位值对样品分组
上一篇：centos7.5配置双网卡上网


下一篇：Centos 8双网卡设置