React Native八大Demo

最新推荐文章于 2024-06-08 17:39:03 发布

aiamt68242

最新推荐文章于 2024-06-08 17:39:03 发布

阅读量540

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/gdsblog/p/7275220.html

版权

本文记录了使用React Native实现的八大功能，包括微信分享、导航条渐隐、通讯录、卡片轮播、时间轴等，并提供了相应的开源库和代码示例，为实际项目开发提供参考。

摘要由CSDN通过智能技术生成

参考资料：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,
    },
});