不连接数据库版,使用iOS原生视图

2019-10-06 13:03 来源:未知

Ztree能够去官方网站去下载相应的本子和API,作者那边就简单的介绍下它的实现以及因为Ztree的小例子印发的Js难题,稍后我会在博客中写JS的异步难点,

Ztree能够去官方网址去下载相应的版本和API,小编这里就大致的牵线下它的兑现以及因为Ztree的小例子印发的Js难题,稍后笔者会在博客中写JS的异步难点,

在付出React Native的App的时候,你会遇见重重地方是原生的视图组件已经支付好了的。有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP能够直接采纳的原生视图是不菲的。React Native提供了一套完善的编写制定,你能够特别轻便的用来包装已有的原生视图。

作者那边用的是MVC4.0,好了本文最先,上代码

本人这里用的是MVC4.0,好了本文发轫,上代码

代码地址:

图片 1;)

namespace ZtreeDemo.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Edit()
        {
            var list = GetData();
            return Json(list, JsonRequestBehavior.AllowGet);
        }

        [NonAction]
        public List<Tree> GetData()
        {
            List<Tree> tree = new List<Tree>();
            tree.Add(new Tree { id = 1, pId = 0, name = "蔬菜", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
            tree.Add(new Tree { id = 2, pId = 0, name = "动物", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
            tree.Add(new Tree { id = 3, pId = 0, name = "人类", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
            tree.Add(new Tree { id = 4, pId = 1, name = "茄子", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
            return tree;
        }

    }

    public class Tree
    {
        public int id { get; set; }
        public int pId { get; set; }
        public string name { get; set; }
        public string icon { get; set; }
    }
}

下边就用高德地图作为例子疏解怎样包装原生视图。高德地图本身不仅唯有视图须求出示,还应该有一点点和React Native交互的片段。比方给Js代码发送事件,接受Js发送的章程调用等。

namespace ZtreeDemo.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Edit()
        {
            var list = GetData();
            return Json(list, JsonRequestBehavior.AllowGet);
        }

        [NonAction]
        public List<Tree> GetData()
        {
            List<Tree> tree = new List<Tree>();
            tree.Add(new Tree { id = 1, pId = 0, name = "蔬菜", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
            tree.Add(new Tree { id = 2, pId = 0, name = "动物", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
            tree.Add(new Tree { id = 3, pId = 0, name = "人类", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
            tree.Add(new Tree { id = 4, pId = 1, name = "茄子", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });
            return tree;
        }

    }

    public class Tree
    {
        public int id { get; set; }
        public int pId { get; set; }
        public string name { get; set; }
        public string icon { get; set; }
    }
}

  这里作者就不在解释了,类等自家都没去规划,直接在此地写了,相比较方便。接下来是视图代码,视图上本身用的是ajax获取数据,

简短达成

基本山只须要三步就足以直达目标:

  1. 创建RCTViewManager的子类
  2. 在源文件里加多RCT_EXPORT_MODULE()宏的调用
  3. 实现- (UIView *)view方法

看看代码:

//.h
#import <Foundation/Foundation.h>
#import <React/RCTViewManager.h>

@interface GDMapViewManager : RCTViewManager

@end

//.m
#import "GDMapViewManager.h"
#import "GDMapView.h"
#import <MAMapKit/MAMapKit.h>
#import <AMapFoundationKit/AMapFoundationKit.h>

@implementation GDMapViewManager

RCT_EXPORT_MODULE()

- (UIView *)view {
  MAMapView *mapView = [[MAMapView alloc] init];
  mapView.showsUserLocation = YES;  // 显示用户位置蓝点
  mapView.userTrackingMode = MAUserTrackingModeFollow;

  return mapView;
}

@end

// index.ios.js
// import from `react` & `react native`...

import { requireNativeComponent } from 'react-native'

const GDMapView = requireNativeComponent('GDMapView', null)

export default class mobike extends Component {
  render() {
    return (
      <View style={styles.container}>
        <GDMapView style={{ flex: 1, }} />
      </View>
    );
  }
}

// styles...
TAG标签:
版权声明:本文由金沙澳门官网4166发布于文物考古,转载请注明出处:不连接数据库版,使用iOS原生视图