• 需求 : react-native项目中需要使用高德地图组件;有基本的轨迹以及marker功能;...react-native-amap3d react-native-maps … 对比了一些,感觉比较全的还是react-native-community的react-native-maps ...
    需求 : react-native项目中需要使用高德地图组件;有基本的轨迹以及marker功能;
    • react-native-amap-geolocation
    • react-native-smart-amap
    • react-native-amap3d
    • react-native-maps

      对比了一些,感觉比较全的还是react-native-community的react-native-maps ;but没找到其可以使用高德地图,只能使用Google map?!!于是,只好选其他的了,最终选择了eact-native-amap3d,效果以及简单使用如下:
    
    import React, {Component} from 'react';
    import {Platform, StyleSheet, View} from 'react-native';
    import { MapView,Marker,Polyline,Polygon } from 'react-native-amap3d';
    
    var Dimensions = require('Dimensions');
    const deviceHeight = Dimensions.get("window").height;
    const deviceWidth = Dimensions.get("window").width;
    
    
    
    class CarDetailsPage extends Component {
      constructor(props) {
        super(props);
        console.disableYellowBox = true;
        this.state = {
        //****
        };
      }
      componentWillMount () {  
      }
    
     
      render() {  
        return (
          <Container>
            <View style={{ flex: 1 }}>
              <MapView
                draggable
                  coordinate={ {
                      latitude: 40.006901,
                      longitude: 116.097972,
                    }}
                  mapType={'standard'}
                  zoomLevel={12}
                  zoomEnabled={true}
                  scrollEnabled={true}
                  rotateEnabled={true}
                  style={styles.mapStyles}
                  showsZoomControls={false}
                  zoomLevel={15}
              >      
        
    			//画marker 
                <Marker 
                  key={navigation.getParam('currentCarName','')}
                  active
                  title={navigation.getParam('currentCarName','')}
                  color='blue'
                  description={'battery:'+this.props.carwebsocket.carstatus.battery}
                  coordinate={ {
                      latitude: 40.006901,
                      longitude: 116.097972,
                    }}/>
                     
            	
            	//画框
                <Polygon 
                coordinates={gps} 
                fillColor={'transparent'} 
                strokeColor={'#1398E2'} 
                strokeWidth={4}
                ></Polygon>  
                     
                //画线条
                <Polyline
                  width={10}
                  color='rgba(255, 0, 0, 0.5)'
                  
                  coordinates={[
                    {
                      latitude: 40.006901,
                      longitude: 116.097972,
                    },
                    {
                      latitude: 40.006901,
                      longitude: 116.597972,
                    },
                    {
                      latitude: 39.706901,
                      longitude: 116.597972,
                    },
                  ]}
                />      
               
    
              </MapView>
             
      
    
             </View>
          </Container>
        );
      }
    }
    const styles = {
      mapStyles:{
        height:deviceHeight,
        width:deviceWidth
      }
    }
    
    export default CarDetailsPage;
    

    虽然react-native-amap3d个人觉得稍微有些组件不够丰富完善,有些遗憾;但是基础功能是够用的,以及配置使用还是比较方便的

    展开全文
  • 今天突然想到在RN里面展示一些3D模型,这样可以增加软件的表现力。 我首先想到的是Unity3D,因为以前做过Unity3D的项目,它使用简单,最主要是用C#...RN:React:15.3.2,React-Native:0.33.0 那么开始记录我的做法:

    参考:http://blog.csdn.net/pz789as/article/details/52604075


    今天突然想到在RN里面展示一些3D模型,这样可以增加软件的表现力。

    我首先想到的是Unity3D,因为以前做过Unity3D的项目,它使用简单,最主要是用C#语言,对于我这个以前用C/C++的人来,是一个很不错的开发工具。

    使用的版本:Xcode:7.3.1 Unity3D:5.3.5f1  RN:React:15.3.2,React-Native:0.33.0

    那么开始记录我的做法:

    首先,分别创建RN项目(Jicheng5)和Unity3D项目(RunInRN),我这里Unity3D项目没做什么特别的,只在场景里面放了一个Cube,然后加了一个脚本,让它自动旋转。



    第二步,导出Unity项目,当然我们要选择导出ios才可以,打开file -》build settings 选中iOS,然后可以设置,其他设置不多说了,可以在网上看教程,我都是默认设置。需要注意5点:

    1.Auto Graphic API: 去掉钩,然后选择OpenGLES2

    2.Scripting Backend:选择IL2CPP

    3.Target Device: 根据需要选择,我这里是默认的iPhone+iPad

    4.Target SDK:一般默认是Device SDK,如果是这个,那么导出之后只能在真机上看效果,我现在是这个,如果你希望能在模拟器上看效果,可以选择Simulator SDK,不过这样你就不能发布了。

    5.Target minimum iOS Version:选择8.0或以上。

    以上这些设置之后,就可以点build按钮,选择路径到我们RN的根目录下面去,然后导出(unityVIew)

                     


    第三步,看到上面导出的目录结构没,现在我们把unityView里面的Classes、Data、Libraries、MapFileParser、MapFileParser.sh拷贝到ios目录下面去

                          


    打开ios里面的xcode工程,导入Classes和Libraries,导入时选择Create groups



    而导入Data时,需要选择Create folder reference:



    第四步:设置Xcode的参数:

    1,选中Jicheng5 -》 build Phases,左上有个“+”号,点击添加run script,shell下面添加 "$PROJECT_DIR/MapFileParser.sh"

    2,选择Link Binary With Libraries,将截图里面缺少的framework都加上:

          

    3,选择Build Settings,搜索到Search Paths,在Header Search Paths中添加:注意引号

    "$(SRCROOT)"

    "$(SRCROOT)/Classes"

    $(SRCROOT)/Classes/Native

    $(SRCROOT)/Libraries/bdwgc/include

    $(SRCROOT)/Libraries/libil2cpp/include

    在Library Search Paths中添加:

    "$(SRCROOT)"

    "$(SRCROOT)/Libraries"

    4,修改main.m,将Classes里面的main.mm中的所有内容拷贝至自己项目的main.m中,可以先将main.m里面的注释掉,然后粘贴拷贝的内容,把自己项目下的main.m重命名为main.mm,最后把Classes里面的main.mm删除。选择remove reference即可。

    把mian.mm里面的修改一下:

    void UnityInitTrampoline();
    
    // WARNING: this MUST be c decl (NSString ctor will be called after +load, so we cant really change its value)
    const char* AppControllerClassName = "AppDelegate";//将原来的UnityAppController改为AppDelegate
    
    #import <UIKit/UIKit.h>//额外添加的
    #import "AppDelegate.h"//<span style="font-family: Arial, Helvetica, sans-serif;">额外添加的</span>
    
    
    int main(int argc, char* argv[])
    {
      @autoreleasepool


    5,选择Jicheng5Targets =》 Build Settings 搜索Prefix Header,添加Prefix Header内容: Classes/Prefix.pch

    6,还是Build Settings中搜索Other C Flags,修改值为-DINIT_SCRIPTING_BACKEND=1

    7,搜索Bitcode,将值设置为NO。

    8,修改Classes中的UnityAppController.h中的内容:

    inline UnityAppController*	GetAppController()
    {
    //	return (UnityAppController*)[UIApplication sharedApplication].delegate;
      return (UnityAppController*)[[UIApplication sharedApplication] valueForKeyPath:@"delegate.unityAppController"];
    }
    这里是把UnityAppController保存在AppDelegate中了,所以只要从delegate中获取就可以了。

    9,在AppDelegate.h文件中添加UnityAppController

    #import <UIKit/UIKit.h>
    #import "UnityAppController.h"
    
    @interface AppDelegate : UIResponder <UIApplicationDelegate>
    
    @property (nonatomic, strong) UIWindow *window;
    @property (nonatomic, strong) UnityAppController* unityAppController;
    
    @end

    然后在.m中初始化unity

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    {
      NSURL *jsCodeLocation;
    
      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    
      RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                          moduleName:@"Jicheng5"
                                                   initialProperties:nil
                                                       launchOptions:launchOptions];
      rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
    
      self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
      UIViewController *rootViewController = [UIViewController new];
      rootViewController.view = rootView;
      self.window.rootViewController = rootViewController;
    //  [self.window makeKeyAndVisible];
      
      _unityAppController = [[UnityAppController alloc]init];//这里初始化unity
      [_unityAppController application:application didFinishLaunchingWithOptions:launchOptions];
    //  self.window = _unityAppController.window;
      
      [self.window makeKeyAndVisible];
      
      return YES;
    }
    补充unity在app中其他状态的代码:

    -(void)applicationWillResignActive:(UIApplication *)application{
      [_unityAppController applicationWillResignActive:application];
    }
    
    -(void)applicationDidEnterBackground:(UIApplication *)application{
      [_unityAppController applicationDidEnterBackground:application];
    }
    
    -(void)applicationWillEnterForeground:(UIApplication *)application{
      [_unityAppController applicationWillEnterForeground:application];
    }
    
    -(void)applicationDidBecomeActive:(UIApplication *)application{
      [_unityAppController applicationDidBecomeActive:application];
    }
    
    -(void)applicationWillTerminate:(UIApplication *)application{
      [_unityAppController applicationWillTerminate:application];
    }

    至此,我们所有必要条件都达成了,如果想看效果,可以在上面的application中,将RN的初始化注释掉,然后把
    self.window = _unityAppController.window;

    这样就可以看到unity页面了。


    但是我们还是希望可以向组件一下显示它,怎么做呢?这里用到我之前的文章RN自定义显示view了,哈哈,没想到这么快就用到刚刚学会的知识了。

    在xcode里面创建RCTUnityView 和 RCTUnityViewManager两个类:


    接下来不多说了,直接看代码:

    //
    //  RCTUnityView.h
    //  Jicheng5
    //
    //  Created by guojicheng on 16/9/20.
    //  Copyright © 2016年 Facebook. All rights reserved.
    //
    
    #import <UIKit/UIKit.h>
    #import "UnityAppController.h"
    
    @interface RCTUnityView : UIView
    
    @property (nonatomic, strong) UIView* uView;
    
    @end

    //
    //  RCTUnityView.m
    //  Jicheng5
    //
    //  Created by guojicheng on 16/9/20.
    //  Copyright © 2016年 Facebook. All rights reserved.
    //
    
    #import "RCTUnityView.h"
    
    @implementation RCTUnityView
    
    -(id)initWithFrame:(CGRect)frame
    {
      self = [super initWithFrame:frame];
      if (self){
        self.uView = (UIView*)GetAppController().unityView;
      }
      return self;
    }
    
    -(void)layoutSubviews
    {
      [super layoutSubviews];
      [self.uView removeFromSuperview];
      self.uView.frame = self.bounds;
      [self insertSubview:self.uView atIndex:0];
      [self.uView setNeedsLayout];
    }
    
    @end

    //
    //  RCTUnityViewManager.h
    //  Jicheng5
    //
    //  Created by guojicheng on 16/9/20.
    //  Copyright © 2016年 Facebook. All rights reserved.
    //
    
    #import "RCTViewManager.h"
    
    @interface RCTUnityViewManager : RCTViewManager
    
    @end

    //
    //  RCTUnityViewManager.m
    //  Jicheng5
    //
    //  Created by guojicheng on 16/9/20.
    //  Copyright © 2016年 Facebook. All rights reserved.
    //
    
    #import "RCTUnityViewManager.h"
    #import "RCTUIManager.h"
    #import "RCTUnityView.h"
    
    @implementation RCTUnityViewManager
    
    RCT_EXPORT_MODULE();
    @synthesize bridge = _bridge;
    
    - (UIView *)view
    {
      return [[RCTUnityView alloc] init];
    }
    
    - (dispatch_queue_t)methodQueue
    {
      return dispatch_get_main_queue();
    }
    
    @end

    好了,原生端已经准备完毕,在JS那边也要写一个组件,看代码:UnityView.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    'use strict'
    import React, { Component } from 'react';
    import { View } from 'react-native';
    import { requireNativeComponent } from 'react-native';
    
    class UnityView extends Component {
      setNativeProps(props){
        this.root.setNativeProps(props);
      }
      render() {
        return (
          <UnityViewNative
            {...this.props}
            style={[
              {backgroundColor: 'transparent'},
              this.props.style,
            ]} 
            ref={(r)=>{this.root = r}}
          />
        );
      }
    }
    
    UnityView.propTypes = {
    
    };
    
    const UnityViewNative = requireNativeComponent('RCTUnityView', UnityView);
    
    export default UnityView;

    至此组件做好咯,是不是很简单啊~哈哈哈哈。。

    然后我们在index里面使用一下看看效果哈,有点小激动:

    <span style="color:#ff0000;">import UnityView from './UnityView';</span>
    
    class Jicheng5 extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit index.ios.js
            </Text>
            <Text style={styles.instructions}>
              Press Cmd+R to reload,{'\n'}
              Cmd+D or shake for dev menu
            </Text>
            <span style="color:#ff0000;"><UnityView style={{width:300, height:200}}/></span>
          </View>
        );
      }
    }

    嘿嘿嘿,没错误,最后给大家看看运行效果,由于我导出的是Device SDK所以只能在真机上看:


    立方体在自动旋转哦!~~


    资料参考:AR学院-Unity导出的项目整合到已有的IOS项目中

    将Unity页面添加到iOS APP中
    unity项目整合嵌入iOS主工程

    找了好几个,综合测试得到自己想要的了。。另外有英语好的,也可以看看他们最后参考的歪果仁写的教程。

    展开全文
  • 一.过程: RN调用原生Android页面,再由Android调用u3d页面 二.... 1.首先配置u3d 配置项目名称,导出格式 ...2.将u3d导出的文件,以module的形式,导入到RN项目的Android文件里面,更改导入的配置 ...

    一.过程:

    RN调用原生Android页面,再由Android调用u3d页面

    二.具体步骤

    1.首先配置u3d

    配置项目名称,导出格式

    2.将u3d导出的文件,以module的形式,导入到RN项目的Android文件里面,更改导入的配置

    ①更改build.gradle里面 

    a.apply plugin: 'com.android.application' =》 apply plugin: 'com.android.library'

    b. 删除或者注释 applicationId 'com.hornsuntest.ProductName'

    c.删除或者注释 bundle

    d.去掉AndroidManifest.xml里面的<intent-filter>

    ②更改app文件夹下的AndroidManifest.xml

    a.在根目录manifest标签下添加 xmlns:tools = "http://schemas.android.com/tools",在application标签下添加tools:replace="android:icon,android:theme,android:allowBackup",添加一个active,作为RN跳转过来的页面,例如

    3.创建原生安卓页面,调用u3d视图

    注意:

    运行时报错:No implementation found for void com.unity3d.player.UnityPlayer.nativeRestartActivityIndicator(),

    可能是由于build.gradle的设置问题,大概是32和64的问题,可以尝试在app的build.gradle中加上下面代码

     

    展开全文
  • React Native地图。
  • 本文主要介绍高德react-native-amap3d组件的使用。 react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS,受 react-native-maps 启发,提供功能丰富且易用的接口。 主要功能: 地图模式切换...

    本文主要介绍高德react-native-amap3d组件的使用。

    react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS,受 react-native-maps 启发,提供功能丰富且易用的接口。

    主要功能:

    地图模式切换(常规、卫星、导航、夜间)
    3D 建筑、路况、室内地图
    内置地图控件的显示隐藏(指南针、比例尺、定位按钮、缩放按钮)
    手势交互控制(平移、缩放、旋转、倾斜)
    中心坐标、缩放级别、倾斜度的设置,支持动画过渡
    地图事件(onPress、onLongPress、onLocation、onStatusChange)
    地图标记(Marker)
    自定义信息窗体
    自定义图标
    折线绘制(Polyline)
    多边形绘制(Polygon)
    圆形绘制(Circle)
    热力图(HeatMap)
    海量点(MultiPoint)
    导航(驾车、步行、骑行)(待完善 :construction:)
    离线地图

    基本功能图形如下:

    第一步:安装

    安装依赖

    $ npm i react-native-amap3d

    项目配置

    Android

    $ react-native link react-native-amap3d

    iOS

    推荐使用 CocoaPods,需要注意 iOS 项目不要 react-native link react-native-amap3d, 不然会引入错误的依赖,导致编译失败。在 ios 目录下新建文件 Podfile

    platform :ios, '8.0'
    
    target 'Your Target' do
      pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
      pod 'React', path: '../node_modules/react-native/', :subspecs => [
        'CxxBridge',
      ]
      pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/ios/'
    end

    然后运行:

    $ pod install

    如果你不想使用 CocoaPods,手动配置请参考:手动部署

    添加高德 Key

    Android

    1、获取高德 Key

    2、编辑 Android 项目的 AndroidManifest.xml(一般在 android\app\src\main\AndroidManifest.xml),添加如下代码:

    <application>
        <!-- 确保 meta-data 是直属 application 的子标签 -->
        <meta-data
          android:name="com.amap.api.v2.apikey"
          android:value="你的高德 Key"/>
    </application>

    iOS

    1、获取高德 Key

    2、在 AppDelegate.m 里引入 SDK 头文件 #import <AMapFoundationKit/AMapFoundationKit.h>, 并设置高德 Key [AMapServices sharedServices].apiKey = @"你的高德 Key";

    基本用法

    import {MapView} from 'react-native-amap3d';

    return <MapView style={StyleSheet.absoluteFill}/>

    导入地图模块

    import {MapView, Marker, Polyline} from 'react-native-amap3d'
    <MapView>
      <Marker .../>
    </MapView>
    或者
    import MapView from 'react-native-amap3d'
    <MapView>
      <MapView.Marker .../>
    </MapView>

    基本用法

    <MapView coordinate={{
      latitude: 39.91095,
      longitude: 116.37296,
    }}/>

    启用定位并监听定位事件


    <MapView
      locationEnabled
      onLocation={({nativeEvent}) =>
        console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
    />


    添加可拖拽的地图标记

    <MapView>
      <Marker
        draggable
        title='这是一个可拖拽的标记'
        onDragEnd={({nativeEvent}) =>
          console.log(`${nativeEvent.latitude}, ${nativeEvent.longitude}`)}
        coordinate={{
          latitude: 39.91095,
          longitude: 116.37296,
        }}/>
    </MapView>

    自定义标记图片及信息窗体点击打开链接


    <Marker
      image='flag'
      coordinate={{
        latitude: 39.706901,
        longitude: 116.397972,
      }}
    >
      <View style={styles.customInfoWindow}>
        <Text>自定义信息窗体</Text>
      </View>
    </Marker>

    接口

    请参考注释文档:
    
    MapView
    Marker
    Polyline
    Polygon
    Circle
    HeatMap
    MultiPoint




    展开全文
  • 移动跨平台框架React Native经过4年的发展,其生态已经变得异常丰富,在使用React Native开发项目的过程中,为了提高开发效率,我们经常会借鉴一些使用使用率比较高的开源库,根据大众的需求,对这些使用较高的 ...

    移动跨平台框架React Native经过4年的发展,其生态已经变得异常丰富,在使用React Native开发项目的过程中,为了提高开发效率,我们经常会借鉴一些使用使用率比较高的开源库,根据大众的需求,对这些使用较高的 React-Native UI 库,我们做一个简单的总结和归类,方便大家更好地入门 React Native。

    本文只是收集了一些常见的UI库和功能库,除了上面介绍的知名第三方库之外,还有很多实现小功能的库,这些库可以大大的提高我们的开发效率,并且可以在此基础上进行二次开发。并且欢迎大家关注我的《React Native移动开发实战》,第二版修改版会再近期再版,欢迎持续关注。

    第三方库

    UI套件

    1, NativeBase

    NativeBase 是一个广受欢迎的 UI 组件库,为 React Native 提供了数十个跨平台组件。在使用 NativeBase 时,你可以使用任意开箱即用的第三方原生库,而这个项目本身也拥有一个丰富的生态系统,从有用的入门套件到可定制的主题模板。
    NativeBase 项目地址: https://github.com/GeekyAnts/NativeBase
    入门学习地址: https://reactnativeseed.com/

    2,React Native Elements

    React Native Elements是一个高度可定制的跨平台 UI 工具包,完全用 Javascript 构建。该库的作者声称“React Native Elements 的想法更多的是关于组件结构而不是设计,这意味着在使用某些元素时可以减少样板代码,但可以完全控制它们的设计”,这对于开发新手和经验丰富的老手来说都很有吸引力。
    React Native Elements 项目地址:
    https://github.com/react-native-training/react-native-elements
    React Native Elements 示例项目:
    https://react-native-training.github.io/react-native-elements/

    3,Shoutem

    Shoutem也是一个 React Native UI 工具包,由 3 个部分组成:UI 组件、主题和组件动画。该库为 iOS 和 Android 提供了一组跨平台组件,所有组件都是可组合和可定制的。每个组件还提供了与其他组件一致的预定义样式,这样可以在无需手动定义复杂样式的情况下构建复杂的组件。

    项目地址:https://shoutem.github.io/ui/

    4, UI Kitten

    UI Kitten这个库提供了一个可定制和可重复使用的 react-native 组件工具包,该工具包将样式定义移到特定位置,从而可以单独重用组件或为组件设置样式。通过传递不同的变量,可以很容易地“动态”改变主题样式。
    项目地址: https://github.com/akveo/react-native-ui-kitten
    项目体验地址:https://expo.io/@akveo/ui-kitten-explorer-app

    5,React Native Material UI

    React Native Material UI是一组高度可定制的 UI 组件,实现了谷歌的 Material Design。请注意,这个库使用了一个名为 uiTheme 的 JS 对象,这个对象在上下文间传递,以实现最大化的定制化能力。

    React Native Material UI 项目地址:
    https://github.com/xotahal/react-native-material-ui
    包含库组件及示例的清单:
    https://github.com/xotahal/react-native-material-ui/blob/master/docs/Components.md

    6,React Native Material Kit

    React Native Material Kit是一套很有用的 UI 组件和主题,实现了谷歌的 Material Design。不过需要说明的是, React Native Material Kit在2017 年 12 月之后就停止维护了。
    项目地址: https://github.com/xinthink/react-native-material-kit

    7,Nachos UI

    Nachos UI 是一个 React Native 组件库,提供了 30 多个可定制的组件,这些组件也可以通过 react-native-web 在 Web 上运行。它通过了快照测试,支持格式化和 yarn,提供了热火的设计和全局主题管理器。
    项目地址: https://github.com/nachos-ui/nachos-ui

    8,React Native UI Library

    Wix 工程公司正致力于开发这个最先进的 UI 工具集和组件库,它还支持 react-native-animatable 和 react-native-blur。这个库附带了一组预定义的样式预设(转换为修饰符),包括 Color、Typography、Shadow、Border Radius 等。
    项目地址: https://github.com/wix/react-native-ui-lib
    这里写图片描述

    9,React Native Paper

    React Native Paper是一个跨平台的 UI 组件库,它遵循 Material Design 指南,提供了全局主题支持和可选的 babel 插件,用以减少捆绑包大小。
    React Native Paper 项目地址:
    https://github.com/callstack/react-native-paper

    Expo 示例应用程序:
    https://expo.io/@satya164/react-native-paper-example

    10,React Native Vector Icons

    React Native Vector Icons是一组 React Native 的可定制图标,支持 NavBar/TabBar/ToolbarAndroid、图像源和完整样式。它非常有用,而且被数千个应用程序以及其他 UI 组件库(如 react-native-paper)所使用。
    项目地址: https://github.com/oblador/react-native-vector-icons
    示例项目:https://oblador.github.io/react-native-vector-icons/

    11,Teaset

    Teaset是一个 React Native UI 库,提供了 20 多个纯 JS(ES6)组件,用于内容显示和动作控制。虽然它的文档不够详尽,但它简洁的设计吸引了我的眼球。
    项目地址:https://github.com/rilyu/teaset

    其他库

    1,antd-mobile

    antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库,这个组件库拥有很多使用的组件。
    这里写图片描述
    项目地址:https://github.com/ant-design/ant-design-mobile

    2,react-native-button

    react-native-button是github上一个开源的button组件,目前仍保持比较快的更新频率,提供比较丰富的Button功能。
    项目地址:https://github.com/ide/react-native-button

    3,react-native-image-viewer

    react-native-image-viewer是一个图片大图浏览的库,点击图片可以放大缩小。
    这里写图片描述
    项目地址:https://github.com/ascoders/react-native-image-viewer

    4,react-native-image-picker

    react-native-image-picker是实现多个图像选择、裁剪、压缩等功能的第三方库,可以使用该库实现图片、照相等操作。
    这里写图片描述
    项目地址:https://github.com/react-community/react-native-image-picker

    5,react-native-picker

    react-native-picker是React native最常见的滚轮控件,可以实现单滚轮、双滚轮和三滚轮效果。
    这里写图片描述
    项目地址:https://github.com/beefe/react-native-picker

    6,react-native-scrollable-tab-view

    react-native-scrollable-tab-view是一个带有TabBar和可切换页面的控件。,在Android中可以看成是ViewPager和TabLayout的结合。
    项目地址:https://github.com/happypancake/react-native-scrollable-tab-view

    7,react-native-app-intro

    react-native-app-intro是实现引导页的库,当然开发者也可以自己手动实现。

    项目地址:https://github.com/fuyaode/react-native-app-intro

    8,3D Touch

    3D Touch是实现React native 3D Touch的库,可以用此库很方便的实现3D Touch。效果如下:
    这里写图片描述
    项目地址:https://github.com/jordanbyron/react-native-quick-actions

    react-native-snap-carousel是可以实现复杂效果的轮播图库,实现的效果如下:
    这里写图片描述
    除此之外,还可以实现Galley效果等多种效果。
    项目地址:https://github.com/archriss/react-native-snap-carousel

    10,react-native-blur

    react-native-blur是专门用于实现毛玻璃效果的。
    项目地址:https://github.com/react-native-community/react-native-blur

    11,react-native-actionsheet

    react-native-actionsheet是实现底部弹框的组件,可以在Android和iOS平台上共用,当然也可以自己封装实现。
    这里写图片描述
    项目地址:https://github.com/beefe/react-native-actionsheet

    12,react-native-popover

    react-native-popover是React Native开发中常见的弹出提示框操作,其效果如下图所示:
    这里写图片描述

    13,react-native-charts-wrapper

    图表在移动开发中应用的场景可谓非常多,这里介绍一款使用的比较多的库。
    这里写图片描述
    项目地址:https://github.com/wuxudong/react-native-charts-wrapper

    14,react-native-spinkit

    react-native-spinkit是一个很炫的加载动画第三方库,可以根据实际情况定制加载的动画。
    这里写图片描述
    https://github.com/maxs15/react-native-spinkit

    15,Facebook Design-iOS 10 iPhone GUI

    Facebook Design-iOS 10 iPhone GUI是iOS 10 公开版的 GUI 元素模板,包括 Sketch、Photoshop、Figma、XD 和 Craft。
    项目首页:https://facebook.design/ios10

    展开全文
  • 使用React Native开发的一个仿美团首页小demo, 源码:https://github.com/lookingstars/RNMeituan 运行说明: 首先需要安装好运行React Native的相关环境, 首先需要安装好运行React Native的相关环境, ...
  • ReactNative调用高德地图使用的是react-native-amap3d插件。可查看插件的github。 1、安装依赖和项目配置 首先命令行中分别执行 npm i react-native-amap3d react-native link react-native-amap3d 2、添加高德...
  • Flutter VS ReactNative

    2018-07-25 14:45:47
    (2) 原生控件的跨平台抽象,如 ReactNative、Weex。 Flutter 走了不一样的路:自己开发了一套原生控件,每个平台实现一遍,然后把渲染引擎(这套控件)打包在每个应用里面,因此性能没有问题,平...
  • React Native学习笔记

    2018-05-09 11:40:28
    官网:https://reactnative.cn/ https://facebook.github.io/react-native/写的Demo:https://github.com/aifeier/ReactNativeTestProject测试创建并运行Android项目:react-native init AwesomeProjectcd ...
  • React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload ...
  • 源码已开源到Github,详细代码可以查看:《React Native 触摸事件代码实践》。 博客产出拖延了很久,老早定的主题现在才开始写。之前群里朋友对于React Native(以下简称RN)中手势触摸相关问题提出的频率很高,...
  • React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 ...
  • React Native 游戏引擎,RN 越来越强大了!.zip,Component library for making games with React & React Native
  • react-native-amap3d,安装过程请参考 README。 基本使用 import {MapView} from 'react-native-amap3d' render() { return MapView style={StyleSheet.absoluteFill}/> } 设置地图状态 所谓的地图状态...
  • 编者按:React Native 是近年来最值得花时间学习的移动开发新技术,随着 Facebook 持续不断的推进,社区同学的支持,更多大公司的加入,React Native 在不断的进化、成熟,性能也在持续提升。不久的将来,相信 ...
  • React Native常用组件

    2018-08-14 14:47:08
    本文收录了,React Native中常用的一些相关组件, 摘录的过程中,可能有所差错,不足之处还望指出. 希望大家可以互相学习,互帮互助! 第一部分 基于react-navigation组件的自定义 head 视图 react-native-...
  • React Native之原理浅析

    2019-10-12 10:48:45
    React Native的核心驱动力就来自于JS Engine. 你写的所有JS和JSX代码都会被JS Engine来执行, 没有JS Engine的参与,你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上,默认的就是JavaScriptCore, iOS 7之.....
  • 如何使用React Native来实现全景的效果,类似于房子,打开后,可以看到房子内部的全貌
  • 如果您曾经想过如何使用带有React Native的OpenCV处理图像,那么您来对地方了。 OpenCV与React Native一起使您能够在移动设备上处理图像 (最有可能要处理由设备相机拍摄的图像)。 这些的最大优点是: 易于实现。 ...
1 2 3 4 5 ... 20
收藏数 2,706
精华内容 1,082
关键字:

3d reactnative