React Native 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
React Native 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
React Native 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
React Native 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
React Native 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织 Facebook
地区 不详
投 递 者 _icode
适用人群 未知
收录时间 2015-03-23

软件简介

React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。

React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Image>替代<img>等。

在幕后,React Native在主线程之外,在另一个背景线程里运行JavaScript引擎,两个线程之间通过一批量化的async消息协议来通信(有一个专门的React插件)。

UI方面React Native提供跨平台的类似Flexbox的布局系统,还支持CSS子集。可以用JSX或者普通JavaScript语言,还有CoffeeScript和TypeScript来开发。有评论说,React的UI层模型要比UIKit好很多。

更好的是,由于基于Web技术,开发起来可以像在浏览器里那样随时在仿真程序中查看应用运行情况,刷新一下就行,无需编译,爽吧。

React Native比起标准Web开发或原生开发能够带来的三大好处:

  1. 手势识别:基于Web技术(HTML5/JavaScript)构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。

  2. 原生组件:使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截,而React Native由于采用了原生UI组件自然没有此问题。

  3. 样式和布局:iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

原生 iOS 组件:

var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;

var App = React.createClass({
  render: function() {
    return (
      <TabBarIOS>
        <TabBarIOS.Item title="React Native" selected={true}>
          <NavigatorIOS initialRoute={{ title: 'React Native' }} />
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  },
});

触摸事件处理:

var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({
  render: function() {
    return (
      <ScrollView>
        <TouchableHighlight onPress={() => console.log('pressed')}>
          <Text>Proper Touch Handling</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

布局:

var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;

var ReactNative = React.createClass({
  render: function() {
    return (
      <View style={styles.row}>
        <Image
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          style={styles.image}
        />
        <View style={styles.text}>
          <Text style={styles.title}>
            React Native
          </Text>
          <Text style={styles.subtitle}>
            Build high quality mobile apps using React
          </Text>
        </View>
      </View>
    );
  },
});
var styles = StyleSheet.create({
  row: { flexDirection: 'row', margin: 40 },
  image: { width: 40, height: 40, marginRight: 10 },
  text: { flex: 1, justifyContent: 'center'},
  title: { fontSize: 11, fontWeight: 'bold' },
  subtitle: { fontSize: 10 },
});

扩展:

// Objective-C

#import "RCTBridgeModule.h"

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule
- (void)processString:(NSString *)input callback:(RCTResponseSenderBlock)callback
{
  RCT_EXPORT(); // available as NativeModules.MyCustomModule.processString
  callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"];]]);
}
@end
// JavaScript

var React = require('react-native');
var { NativeModules, Text } = React;

var Message = React.createClass({
  render: function() {
    getInitialState() {
      return { text: 'Goodbye World.' };
    },
    componentDidMount() {
      NativeModules.MyCustomModule.processString(this.state.text, (text) => {
        this.setState({text});
      });
    },
    return (
      <Text>{this.state.text}</Text>
    );
  },
});
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (34)

加载中
推荐一款功能强大的RN快速开发库: 开源库名称:react-native-easy-app github 地址: https://github.com/chende008/react-native-easy-app 简书介绍: https://www.jianshu.com/p/88821b1607a7 开源库功能: 1 、AsyncStorage 访问封装 (一分钟实现一个简单、易用的持久化数据管理器) 2 、fetch 基础封装 (二十分钟实现一个复杂项目的 Http 请求框架组件的封装) 3 、UI 组件 基础封装 (明显提升布局工作效率) 4 、多屏适配 一行代码实现多屏无感知适配 看着功能挺不错的吧,有兴趣的同学可以了解下先,觉得不错的话,谢谢给个 star ! ^_^
2020/05/29 10:56
回复
举报
推荐一个不错React Native UI / UX库的精选列表: React Native Examples
2018/11/22 22:12
回复
举报
react 的基础学习!作为一个纯粹的小白如何能最基础的搞懂 它的作用 使用方法!
2018/09/26 22:43
回复
举报
打分: 推荐
该评论暂时无法显示,详情咨询 QQ 群:912889742
打分: 力荐
该评论暂时无法显示,详情咨询 QQ 群:912889742
打分: 推荐
mark
2017/02/26 21:25
回复
举报
#React Native#现在才意识到其ListView的垃圾,搞个新坑Better ListView - FlatList https://github.com/facebook/react-native/commit/a3457486e39dc752799b1103ebe606224a8e8d32
2017/02/06 12:27
回复
举报
还不太理解,应该是好东西 React Native
2015/03/27 07:01
回复
举报
有入门视频教程吗? React Native
2015/03/27 07:29
回复
举报
好讨厌在 js 里面写模板。 React Native
2015/03/27 07:46
回复
举报
更多评论
08/19 06:34

React Native 0.65 发布

React Native 0.65 已经发布了,此版本主要亮点包括: Hermes 0.8.1。 react-native-codegen 0.0.7 版现在需要作为 package.json 中的 devDependency。 JCenter 现已弃用且为只读。官方已将 JCenter 作为 maven 仓库移除并更新了依赖项以使用 MavenCentral 和 Jitpack。 将 OkHttp 从 v3 升级到 v4.9.1。有关更改的更多详细信息,可参阅 Upgrading to OkHttp 4。 升级到 Flipper 0.93 以支持 Xcode 12.5。可参阅此处的 Flipper ...

3
2
03/14 07:34

React Native 0.64 发布,iOS 上 Hermes 支持

React Native 0.64 已经发布了,此版本主要亮点包括: 在 iOS 上加入 Hermes 默认情况下启用 Inline Requires React 17 Hermes opt-in on iOS 在此版本中,用户可以使用 Hermes 在 iOS 上进行构建。要在 iOS 上启用 Hermes,可在你的 Podfile 中设置 hermes_enabled 为 true,然后运行 pod 安装。 use_react_native!( :path => config[:reactNativePath], # to enable hermes on iOS, change `false` to `true` and ...

2
1
发表于大前端专区
2020/07/09 08:25

React Native 0.63 发布,告警系统、颜色与交互能力改进

React Native 0.63 已经发布了,此版本主要亮点包括: 默认启用 LogBox <Pressable /> 组件 新增使用系统定义颜色的 API 默认启用 LogBox 社区一直以来反馈错误和警告很难在 React Native 中进行调试,因此开发团队研究了 React Native 中的整个错误、警告和日志系统,从头开始对其进行了重新设计,现在使用一个新系统 LogBox 替换 redbox、yellowbox 与日志记录。上一个版本中已经引入该 LogBox,此版本开始,它默认开启,并在...

8
8
发表于大前端专区
2020/04/07 07:38

React Native 0.62 发布,默认支持 Flipper,新的暗黑模式

React Native 0.62 发布了,此版本一大亮点是默认支持 Flipper。 Flipper 是用于调试移动应用的开发人员工具,它在 Android 和 iOS 社区中都很流行,Flipper 提供以下功能: Metro Actions:重新加载应用并从工具栏直接触发开发菜单。 Crash Reporter:查看来自 Android 和 iOS 设备的崩溃报告。 React DevTools:与所有其它工具一起使用最新版本的 React DevTools。 Network Inspector:查看设备应用程序发出的所有网络请求。 ...

0
4
发表于大前端专区
2019/09/26 06:57

React Native 0.61.0 发布,使用 React 编写原生应用

React Native 0.61.0 发布了,这是一个稳定版本,此版本带来的一些主要变化如下: 全新的热加载体验,称为“快速刷新”(Fast refresh)。它是默认开启的,可以在开发人员菜单下访问。敬请期待在即将发布的博客文章中有关此功能的更多详细信息。 React 版本已更新至 16.9 - 0ccedf3 通过 use_frameworks 更好地支持 CocoaPods 更新说明及下载地址...

7
4
发表于大前端专区
2019/08/15 07:05

React Native 0.60.5 发布,使用 React 编写原生应用

React Native 0.60.5 发布了,这是一个补丁版本,更新内容如下: 新增 为新项目添加了默认的 Prettier 配置 (f4d5e8c by @jpdriver) Android 将 showSoftInputOnFocus 添加到 TextInput (b476ca0) 变动 CLI 更新至 ^2.6.0 (72473c7 by @thymikee) 修复 确保使用正确版本的 Metro bundler(0.54.1) (1bb197a by @kelset) Android 在发布版本中修复 Android 中的 ClassNotFound 异常 (ffdf3f2 by @thecodrr) 运行 JS 服务器时删除...

3
5
发表于大前端专区
2019/07/26 07:36

React Native 0.60.4 发布,修复新 JS 引擎相关问题

React Native 0.60.4 发布了,此版本修复了两个与 Hermes 相关的 bug: 修复未启用 Hermes 时的源映射 生成 assets/ 之外的源映射 Hermes 是 React Native 0.60.2 版本引入的一个小巧轻便的 JavaScript 引擎,针对在 Android 上运行 React Native 进行了优化。对于许多应用程序,只需启用 Hermes 即可缩短启动时间、减少内存使用量并缩小应用程序大小,此外因为它采用 JavaScript 标准实现,所以很容易在 React Native 应用中集...

1
4
发表于大前端专区
2019/07/13 07:34

React Native 0.60.2 发布,带来全新 JS 引擎 Hermes

React Native 0.60.2 发布了,此版本带来了 Chain React Conf 2019 上宣布的 Hermes JavaScript 引擎。 Hermes 是一款小巧轻便的 JavaScript 引擎,针对在 Android 上运行 React Native 进行了优化。对于许多应用程序,只需启用 Hermes 即可缩短启动时间、减少内存使用量并缩小应用程序大小,此外因为它采用 JavaScript 标准实现,所以很容易在 React Native 应用中集成。 目前 Hermes 是一个可选的 React Native 功能,具体启用...

3
7
发表于大前端专区
2019/07/05 07:13

React Native 0.60.0 发布,使用 React 编写原生应用

React Native 0.60.0 稳定版发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 主要更新内容如下: 支持 AndroidX 完全删除 WebView 和 Geolocation 默认 CocoaPods 集成 自动链接包 可以在更改日志中找到完整的更改列表。 更新说明及下载地址

3
2
发表于大前端专区
2019/06/11 06:59

React Native 0.60.0 RC1 发布,支持 AndroidX

React Native 0.60.0 的第一个候选版本发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 主要更新内容如下: 支持 AndroidX 完全删除 WebView 和 Geolocation 视图能够嵌套在 Text 组件中 默认 CocoaPods 集成 作为 beta 支持自动链接包 一些重要的修复,比如,对于 iOS:修复 iOS 12/Xcode 10 中的通用链接问题 详情可查看完整更新列表。 更新说明及下载地址...

1
1
发表于大前端专区
2019/06/07 07:48

React Native 0.59.9 发布,使用 React 编写原生应用

React Native 0.59.9 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版本是针对几个 ScrollView 回归的补丁修复版本,更新内容如下: 改动 如果未在配置中指定 isInteraction,则它将始终默认为 true,这将阻止 VirtualizedList 更新之类的交互。如果某些内容最终干扰动画并导致帧丢失,则可以手动设置 isInteraction 更新 detox 以匹配 master 安卓端 Bump Gradle 5.4.1 & Android Gradle 插件 3....

3
1
发表于大前端专区
2019/05/10 07:24

React Native 0.59.8 发布,使用 React 编写原生应用

React Native 0.59.8 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版是一个补丁版本,更新亮点有: 新增 为非值动画节点添加侦听器 默认设置 ScrollView throttle 改动 在键盘关闭时使 KeyboardAvoidingView 与 behavior="height" 调整大小 更新网络检查器以获得更智能的滚动粘性 修复 修复 hasteImpl 上的 regexp 在 EventEmitter#listeners() 中修复稀疏数组处理 修复 VirtualizedList 以立即调...

3
2
发表于大前端专区
2019/04/10 06:50

React Native 0.59.4 发布,使用 React 编写原生应用

React Native 0.59.4 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版是一个补丁版本,更新亮点有: 改动 Jest transform @react-native-community 包现在是默认的 - 17292c9 iOS 端改动 将 scrollToOverflowEnabled prop 添加到 ScrollView - e3ac329 修复 修复触摸事件“长按” - 05723ed 安卓端 防止设置 underlineColorAndroid 时的一个崩溃 - d6bca97 iOS 端 修复 iOS 12 / Xcode 10 中无效的...

4
1
发表于大前端专区
2019/03/26 07:38

React Native 0.59.2 发布,使用 React 编写原生应用

React Native 0.59.2 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版是一个补丁版本,更新亮点有: 安卓端改动 向所有使用 Conscrypt 的安卓版本提供 TLS 1.3 的支持,在这之前用户需要添加 implementation('org.conscrypt:conscrypt-android:2.0.0') 到 build.gradle 默认情况下,为 Android 关闭 Metro JS Deltas 安卓端修复 设置 TextInput 内容类型时, pre-26 安卓设备的崩溃 在 SectionLis...

7
1
发表于大前端专区
2019/03/13 06:48

React Native 0.59.0 发布,使用 React 编写原生应用

React Native 0.59.0 发布了。React Native 使开发者只使用 JavaScript 也能编写原生移动应用。 新版更新亮点: React Hooks React Native 命令行工具单独提取到这个仓库 大量新弃用的组件 原生安卓端大量的 QoL 提升(通过新的 JSC、AppCompatActivity 等提供 64 位支持)—— 其中一些更新对 brownfield 应用来说是重大改动。 具体细节可以查阅更新日志 下载地址: Source code(zip) Source code(tar.gz)...

10
2
发表于大前端专区
2019/02/15 08:23

React Native 0.59.0-rc.1,使用 React 编写原生应用

React Native 昨天发布了两个更新,分别是 React Native 0.59.0-rc.1 和 React Native 0.59.0-rc.0,事实上前者是后者的紧急修复版本。 下面看看 0.59 带来了哪些更新: React Hooks 将 CLI 工具单独提取至 新的仓库 弃用了相当一大部分的组件 在原生 Android 端进行了大量的 QoL 改进(通过新的 JSC,AppCompatActivity 等支持64位) —— 其中一些将是破坏性的变更(对于 brownfield 应用程序来说) 官方表示,目前暂不提供变...

2
0
发表于大前端专区
2019/01/25 07:13

React Native 0.58.0 发布,使用 React 编写原生应用的框架

React Native 0.58.0 发布了,此版本中有许多重大更改,我们希望特别提请您注意: 更新和强化核心组件 。 停止对ScrollView、CameraRollView和SwipeableRow的修改,使其在某些方法中不再绑定到组件实例。 在 WebKit 中支持 TLS。 Asset serving from directories besides /assets 修复大量软件运行时的崩溃问题。 本次更新内容较多,详情请查看更新日志...

4
5
发表于大前端专区
2018/12/17 08:08

React Native 0.57.8 发布,使用 React 编写原生应用的框架

React Native 0.57.8 发布了,要注意的是,当升级到这个版本时,至少需要将 react 和 react-test-renderer 升级到 "16.6.0-alpha.8af6728",这是为即将到来的 React "16.6.3" 的 "first class support" 做准备。 更新内容 Added Fix: Add displayName to ActivityIndicator (#22417) (1d8744f) Changed Switch: Improve Accessibility (83d1e85 by @yungsters) React sync for revisions 3ff2c7c...6bf5e85 (8d1d47a by @yungs...

2
1
发表于大前端专区
2018/12/07 08:18

来吐槽吧,说说你对 React Native 有哪些不满意的地方?

昨日,来自 Facebook React Native 团队的工程师经理 cpojer(Christoph Nakazawa) 在 React Native 社区的 GitHub 主页中新开了一个 issue,旨在收集各位开发者在使用 React Native 时遇到的问题 —— 不只是技术问题,可以是任何可归因于 React Native 项目的问题。当然,cpojer 表示,不要误以为在这个 issue 下提到的问题能够被优先考虑并立即修复。React Native 对这些问题进行收集和整理后,有可能会在2019年进行解决。 下...

8
8
发表于大前端专区
2018/11/03 08:04

React Native 发布关于重构的具体细节和路线图

6月中旬开源中国曾报道过 Facebook 要对 React Native 进行大规模重构,旨在使其更轻量,更具灵活性,更适应 JavaScript 生态圈的发展。现在 Facebook 正式公开了关于重构 React Native 的一些细节和路线图。 Facebook 对于 React Native 的愿景总体如下: 成为一个健康的 GitHub 仓库,及时处理 issue 和 PR 提高测试覆盖率 同步自 Facebook 代码仓库的 commits 不能违反开源测试的准则 增加更多有意义的社区贡献 拥有稳定的 ...

2
7
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2020/05/15 15:13

ReactNative和小程序混编

背景 本文我们将开一下脑洞,在 ReactNative 工程基础上下集成及运行小程序方案。 先看一下效果如下: 环境搭建 npm install -g react-native-cli yarn 官方的环境搭建文档已经有详细的说明,这里不再重复。大家可以看下我本地的环境配置版本,目前整个项目运行稳定,可以借鉴。 $ react-native info info Fetching system and libraries information... System: OS: macOS 10.15.3 CPU: (8) x64 Intel(R) Core(TM) i7-...

0
0
发表了博客
2019/02/11 20:44

ReactNative开发环境配置

#ReactNative开发环境配置 ###核心理念:既拥有Native的用户体验,又保留React的开发效率. 目前,React Native基本完成了对多端的支持,实现了真正意义上的面向配置开发:开发者可以灵活的使用HTML和CSS布局,使用React语法构建组件,实现:H5,Android,iOS多端代码的复用. ###React Native的优势 跨平台开发: 运用React Native,我们可以使用同一份业务逻辑核心代码来创建原生应用运行在Web端,Android端和iOS端; 追求极致的用户体验:实时...

0
0
发表了博客
2019/12/10 23:22

初始 ReactNative

https://reactnative.cn/docs/getting-started.html 中文官方地址 https://www.jianshu.com/p/95137688897a 安装。 可能遇到的问题:https://blog.csdn.net/bbcv55/article/details/82930010 https://blog.csdn.net/herman_hy/article/details/98624153 以及: [!] /bin/bash -c set -e #!/bin/bash # Copyright (c) Facebook, Inc. and its affiliates. # # This source code is licensed under the MIT license found in the...

0
0
发表了博客
2018/08/14 10:09

ReactNative快速入门

首先放图 这就是我通过简单的搭建环境写出的helloworld和使用的button组件。 那么搭建环境如何搭建呢? 使用的软件有:Node 最新版,Python2.7,Android环境要有配置Android,首先安装jdk。最新版android studio3要安装jdk1.8。 接下来我讲讲Android环境的配置。 第一下载jdk1.8 第二下载android studio3 第三下载android sdk 第四打开AS(android studio),cancel proxy,然后配置sdkmanage,选择api版本,点击安装,这里比较...

0
0
发表了博客
2018/12/07 14:27

ReactNative学习线路

基础与入门 学习网站:《ReactNative基础与入门》-评分9.5 https://www.imooc.com/learn/808 Github上RN相关相关 1、学习React Native必看的几个开源项目 https://www.cnblogs.com/qiangxia/p/5584622.html http://www.cnblogs.com/gooder2-android/p/9087884.html 2、React Native之旅01-创建项目 https://www.cnblogs.com/dasn/articles/5515288.html 3、React Native开源项目-仿宝宝健康客户端 http://www.lcode.org/react...

0
0
发表了博客
2020/05/15 15:11

ReactNative和小程序混编

背景 本文我们将开一下脑洞,在 ReactNative 工程基础上下集成及运行小程序方案。 先看一下效果如下: 环境搭建 npm install -g react-native-cli yarn 官方的环境搭建文档已经有详细的说明,这里不再重复。大家可以看下我本地的环境配置版本,目前整个项目运行稳定,可以借鉴。 $ react-native info info Fetching system and libraries information... System: OS: macOS 10.15.3 CPU: (8) x64 Intel(R) Core(TM) i7-...

0
0
发表了博客
2018/09/07 17:50

ReactNative(0.54)总结

RN简单来说,就是ReactJs+java+ObjectC混合开发,跨平台App **Part1:** 1.首先安装RN运行环境需要:JDK,NodeJs,Python2,React-Native-Cli客户端,ANDROID STUDIO(用于安装模拟器),WebStorm(IDE) 2.WS里新建 ReactNative项目,自动生成项目目录结构 **Part2:** 1.最小组成单位,js文件,入口文件为App.js 2.代码组成: ```javascript //导入相关组件包 import React,{Component} from "react"; import {View, Image, Text, Styl...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
07/04 21:36

有没有react大佬 咨询几个问题,非常感谢,萌新求帮助,有的话留下联系方式

本人初学react 打包遇到一些问题

2
0
发表于大前端专区
2018/05/31 20:25

React Native 调试问题

使用React Native Tool在VSCODE中进行断点调试时点击DEBUG Android,弹出 Could not debug. Unknown error: not all success patterns were matched. It means that "react-native run-android" command failed. Please, check the View -> Toggle Output -> React-native, View -> Toggle Output -> React-native: Run android output windows. 不知是什么问题,望指教...

1
0
发表了问答
2016/02/27 10:45

ionic react-native和native开发移动app到底那个好

ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比。欢迎大家补充指正 一、 跨平台特性 ionic : write once, run anywhere ( 一次开发,随处运行,学习成本低 会html css js就可以学会) 不涉及到系统级的开发的话, 确实是一次开发 处处运行,如果涉及到系统级API调用以及项目配置(如 ios plist文件)则需要自己手动编写cordova插件的...

11
4
发表于大前端专区
2018/04/03 16:48

高手问答第 192 期 —— 深入认识 React Native — 跨平台移动开发必备

OSCHINA 本期高手问答(4 月 4 日 - 4 月 10 日)我们请来了张益珲@珲少 和大家一起探讨关于使用 React Native 进行移动端跨平台应用开发的问题。 张益珲,工学学士,一位经验丰富的程序员,曾开发过 iOS 平台系列游戏疯狂越狱1-2,应用物通配货软件,VIPExam考试库,证券财经软件等,曾就职于中国唯品会,目前主要从事移动端应用开发,对 iOS 开发和 React Native 跨平台开发拥有丰富经验。同时,珲少也是开源中国社区的优秀博主...

81
15
发表于大前端专区
2018/03/05 15:34

React-native Picker组件无法更新selectedValue的值?

由于需要根据服务器的配置生成对应的UI 逻辑是 1、获取服务器配置 2、将配置的list放到第一个picker中 3、监听onValueChange事件更新第一个picker的selectedValue并渲染form表单(包含Textinput,Picker,showImagePicker,checkbox) 4、选择生成的Picker并更新当前Picker的selectedValue(由于这里的Picker不是固定的,可能是多个可能是单个,所以我用了一个this.setState({items_set:{配置的ID:Picker值}}))这种方式,但这里就...

1
0
发表了问答
2017/11/28 14:15

开始自己做 App 产品谋生,看能支持多久

工作多年之后,总想试试看自己做产品来销售谋生能不能行,所以就做了自己的应用,看能支持多久。 想在还年轻的时候,体验一下,都说很难,看看到底如何,积累点经验教训。 最近发布的第一个应用产品,请大家有时间批一下,学习一下,并了解一下经验教训。代码尚未开源,计划逐步形成组件,并开源。 https://gitee.com/tomlike/wsjzb-release 这里可以下载。 http://shouji.baidu.com/software/22823683.html 用 React Native 写...

110
2
发表了问答
2017/07/25 11:49

国内有没有用RN(React Native)做的比较成功的APP?

目前,考虑做手机APP,打算用RN(React Native)做,想问问,国内有没有用RN(React Native)做的比较成功的APP? 求推荐一两个案例,我想看看实际使用的效果,谢谢!

2
0
发表了问答
2017/07/16 16:58

react native 安装遇到问题

帮弄明白 20元红包 qq907522076

4
0
发表了问答
2017/02/21 09:30

react native 调用原生recyclerview组件

当reactnative调用原生recyclerview组件时,当需要添加一个item时 ,即adpater发生改变,需要界面更新,但是js端视图需要手动滑一下才会更新界面

1
0
发表了问答
2016/11/21 14:46

OSC 第 134 期高手问答 — React 全栈整合开发

OSCHINA 本期高手问答(2016 年 11 月 21 日 — 11 月27 日)我们请来了@vikingmute 张轩和@nighca 杨寒星为大家解答关于 React 方面的问题。 张轩,前端开发工程师。曾经在百度、携程就职,目前在苹果公司担任前端开发工程师。拥有丰富的 Web 开发经验,喜欢追寻新技术,在 GitHub 上关注各种有趣的项目,同时致力于前端工程化,并且有大型 SPA 项目的架构及开发经验。他同时是一名业余文学爱好者,在工作之余写一些短篇小说。...

56
32
发表了问答
2016/03/08 12:11

react native fetch url是变量问题

使用react native 的 fetch post数据到服务器, fetch('http://127.0.0.1:3000/user/create',{ method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify(obj) }) 上面这样写是没有问题的,能访问服务器. 下面这样写就不行: var Service = { host: 'htt...

1
0
发表了问答
2016/11/22 10:15

React Native 中的 Android 原生模块

我们要写一个什么东西 在写这篇文章时,React Native 包含了 ImagePickerIOS 组件,但是在 Android 平台上却没有对应的 ImagePicker 组件。我们接下来就要为 Android 构建一个简单的、和 ImagePickerIOS 大致相仿的 ImagePicker。 编写一个 React Native 的 Android 原生模块需要以下步骤: 创建一个 ReactPackage,把很多模块(Native 和 Javascript)包含在一起,然后在 MainActivity 中的 getPackages 方法引用。 创建一个 ...

2
2
发表了问答
2015/12/01 10:14

React Native与ExMobi技术路线探索

随着Facebook陆续开源React Native的iOS和Android版本,这种以JavaScript来开发原生APP的方式在移动应用开发圈里得到广泛关注,虽然React Native并不是第一个采用JavaScript编写原生APP的产品,但是其独特的设计思想和实现方式是非常值得借鉴的。 而作为国内老字号的移动应用开发平台,同样支持开发原生APP 以及轻应用的ExMobi经过7年不断演进之后,在技术架构上又有怎样的突破呢? 这里,笔者就通过亲身体验来剖析React Nativ...

12
5
发表了问答
2016/10/09 16:17

OSC 第 129 期高手问答 —— 如何使用 React Native 实现跨平台开发

OSCHINA 本期高手问答(10月9日-10月16日) 我们请来了@boolron 为大家解答关于React Native开发实践方面的问题。 @boolron ,甘果移动iOS高级工程师,从2012年开始接触客户端开发,参与过多个App的核心研发,如有演出、音乐人攻略等,其中有演出曾上榜App Store音乐类App前10,积累了丰富的移动开发经验,当Facebook推出React Native后,对其研究并开展甘豆影评RN版的开发,掌握运用Redux来维护App的状态变更。 甘果影评 React ...

49
52
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
34 评论
890 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部