我的React-Native不得不说的一些事情－1 - 简书
我的React-Native不得不说的一些事情－1
创建文档时间：-23:18
作者：三月懒驴
使用平台：Mac
//前提：安装node 再安装react-native命令行工具
//随便填写回车下去。
npm install -g react-native-cli
//不用翻墙的安装方法
mkdir react_native
cd react_native
npm install react-native --save
node -e "require('react-native/local-cli/cli').init('.','MyProject')"
//翻墙的可以这样：
react-native init
//运行:Mac
在项目文件里面的IOS文件夹用Xcode打开MyProject.xcodeproj，在Xcode里面运行
组件这个概念是非常棒的！下面我们来看看react-native自带的一些组件。 这里面只说部分我自己用过的，基本都是IOS平台的一些自带组件
ActivityIndicatorIOS (加载那个菊花)
DatePickerIOS （日期选择器）
Image （图片）
ListView（重点:列表）
MapView （地图）
（Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。）
Navigator(重点：导航器)
PickerIOS （选择器）
ProgressViewIOS (进度条)
RefreshCortrol
这一组件用在ScrollView内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。
ScrollView （重点：可滚动视图）
SegmentedControlIOS （分段选项：就是在一行有多个选项）
SliderIOS (可拉动的滑块：就像视频进度条那种滑块)
StatusBar组件可以同时加载多个。此时属性会按照加载顺序合并（后者覆盖前者）。一个典型的用法就是在使用Navigator时，针对不同的路由指定不同的状态栏样式，
Swicth (开关)
TabBarIOS / TabBarIOS.Item (重点，就像微信底部那个)
Text (基础)
TextInput (输入框)
View （基础）
WebView (网页)
Touch系列的
TouchableHighlight
TouchableOpacity
ActionSheetIOS (底部弹起的菜单)
Alert / Alert (提示框)
Animated (动画)
AppRegistry
是JS运行所有React Native应用的入口。应用的根组件应当通过AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载应用的代码包并且在启动完成之后通过调用AppRegistry.runApplication来真正运行应用。
AppState / AppStateIOS
能告诉你应用当前是在前台还是在后台，并且能在状态变化的时候通知你。AppState通常在处理推送通知的时候用来决定内容和对应的行为。
AsyncStorage
AsyncStorage是一个简单的、异步的、持久化的Key-Value存储系统，它对于App来说是全局性的。就像H5里面的LocalStorage
CameraRoll (访问本地相册功能)
Dimensions (重点：获取屏幕高度)
InteractionManager
Interactionmanager可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证JavaScript动画的流畅运行。
LayoutAnimation (当布局变化时，自动将视图运动到它们新的位置上。)
Linking / LinkingIOS
提供了一个通用的接口来与传入和传出的App链接进行交互。如果想要在网页中告诉系统要打开你的APP，可以使用这个
NativeMethodsMixin
提供了一些用于直接访问底层原生组件的方法。这在你需要聚焦(focus)一个视图或者计算它在屏幕上显示的尺寸之类的情况下可能会需要。
NetInfo (获知设备联网或离线的状态信息。)
PanResponder
可以将多点触摸操作协调成一个手势。它使得一个单点触摸可以接受更多的触摸操作，也可以用于识别简单的多点触摸手势。
PixelRatio (重点：像素密度)
PushNotificationIOS (重点：推送)
StatusBarIOS (设置iOS状态的显隐与样式)
StyleSheet (重点：CSS)
VibrationIOS (控制设备震动)
4. 课间总结
上面一共介绍了20多种组件和API。而实际上，我们初学者可以把他们分为几类。基础，重点和额外。基础是必须掌握的，重点是在应用中普遍用到的，而额外的话是根据实际使用情况使用。
基础：View，Text，TouchableHightLight，Image，TextInput
重点：ListView，Navigator／StatusBar，TabBarIOS／TabBarIOS.Item，ScrollView／RefreshCortrol
额外：剩下的那些
API (API这些其实都需要认识一下，用的时候难度不大，所以这里就总结出一个常用的出来)
常用 ： StyleSheet , PixelRatio , Dimensions , Animated , AppRegistry
5.1 进入Hello World！编辑：index.ios.js
'use strict'
//下面要做三件事：引入模块，定义一个组件，把组件注册到APP去。
//但是为了让视觉好看点，我们要用styleSheet来进行布局，
//因此在定义组件之后，我们可以定义一个样式对象，再进行注册到APP去
//1.引入模块（PS：0.2之后全面使用ES6语法了）
import React from 'react-native'
let {AppRegistry,Component,StyleSheet,Text,View} = R
//2.定义组件
class MyProject extends Component{
&View style={styles.body}&
&Text style={styles.text}&Hello World!&/Text&
//3. 定义样式对象
const styles = {
flex:1,//让内部元素都带有相同的长度，忽略它们的内容：
justifyContent:'center',//内部元素在主轴上的对齐方式。
alignItems:'center',//内部元素在交叉轴上如何对齐。
backgroundColor:'#ccc',
fontSize:20,
textAlign:'center'
//4. 注册:这里的第一个参数是你生成项目时候起的名字，
//第二个参数是ES6的箭头函数。()=& XXX 等价 function(){}
AppRegistry.registerComponent('MyProject',()=& MyProject);
5.2 的进阶：把组件分离出去
//touch component.js －－》新建一个文件
把上一个例子的组件部分代码分离出来
//in component.js
'use strict'
import React from 'react-native'
let {StyleSheet,Text,View} = React
export default class Test extends Component{
&View style={styles.body}&
&Text style= {styles.text}&Hello World！&/Text&
let styles = {
justifyContent:'center',
alignItems:'center',
backgroundColor:'#fcfcfc',
fontSize:40,
textAlign:'center'
//in index.ios.js
'usr strict'
//1.引入模块和组件
import React from 'react-native'
import TestComponent from './component'
let {AppRegistry,Component,StyleSheet,Text,View} = R
//2.定义组件
class MyProject extends Component{
&TestComponent /&
AppRegistry.registerComponent('MyProject',()=& MyProject);
未完待续...
更新： 网格布局： https://www.npmjs.com/package/react-native-gridview 性能优化的可拖动排序的标签组件react-native-drag-to-sort-tags https://github.com/bo...
React Native优秀博客，以及优秀的Github库列表（很多英文资料源自于[awesome-react-native](https://github.com/jondot/awesome-react-native)） 关于开源库类 - Star 100+ ? - S...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
@(编程星球) 看得懂的React Native 0.35版本文档翻译（The basic） [toc] 前言 本文是对React Native官方文档中The Basic部分的&意译&.并不是一字一句对应文档翻译的.英文和中文在表达上有很多不同的地方,如果一字一句翻译,最...
《奇葩说》应该是现在最红的网综节目了（其实是辩论）。已经开播的三季，创造了三个大神：马薇薇，邱晨，黄执中。马东，高晓松，康永，组成的“马晓康”团队，堪称才华、默契、颜值（这个忽略）第一的天团。 但是今天重点讲罗胖。 在这些奇葩里当导师，是不容易的。第二季，高晓松因故退出，请...
喜欢摄影的人一定有这样的时候：行走海边、田间、街头、山野，眼前蓦然出现一片景色，美丽又动人。你会特别想拿出相机来把看到的景色定格成图片，永久封存。 如果手边有相机，好幸运你可以将这美妙的瞬间留住；如果没有，那么你只好，遗憾。 在你的人生中是不是也有这样特别想留住的瞬间，特别...
我身边有很多喜欢跑步的人，好像这个年代最流行的事情早已不是逛淘宝不是看电影也不是吃吃喝喝，而是换上短裤小背心儿，穿着高逼格跑鞋奔向跑道。当然啦这也不足为奇，我们都想努力展现一个积极向上，生活健康的自己，颓废失落的负面情绪早已经成了被大众嗤之以鼻的东西。 所以大家都「爱」跑步...
01 低迷的时候，觉得全世界只有我最痛苦，就自己承受着难以言喻的痛苦。 可是后来才发现，原来每个人，都有那样一段不想表露出来，所以表面沉默不语，风平浪静，却在自己的世界里哭天喊地、摇摇欲坠的日子。 那个孤独的时刻别人说不上话，搭不上手。 明明是浅显易懂的道理，自己却沉浸其中...
那一天，自己也是在这样浇着水——绫音回想起了大约一年前的那一幕，义孝就是在那一天对她宣告了那件残酷的事实。她一边听他讲，一边望着种在塑料花盆里的三色堇。这是她的好友津久井润子生前最軎欢的花，所以润子才给自己起了个“蝴蝶堇”的笔名，也就是三色堇的别名。她和润子是在伦敦的一...reactnative的modal弹窗，如何封闭成全局弹窗，这样其它的视图页也可以调用？不用每页都写一遍！_百度知道
reactnative的modal弹窗，如何封闭成全局弹窗，这样其它的视图页也可以调用？不用每页都写一遍！
我有更好的答案
需自备Mac OSX XCode node 及 npm 做准备打终端（或其命令行利器）键入面命令： npm install -g react-native-cli react-native
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。ModalModal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。
在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
在从根视图开始就使用RN编写的应用中，你应该使用Navigator来代替Modal。通过一个最顶层的Navigator，你可以通过configureScene属性更加方便的控制如何将模态场景覆盖显示在你App其余的部分上。
animated bool onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func onShow function transparent bool visible bool
'use strict';
var React = require('react-native');
StyleSheet,
TouchableHighlight,
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '&Modal&';
exports.description = 'Component for presenting modal views.';
var Button = React.createClass({
getInitialState() {
active: false,
_onHighlight() {
this.setState({active: true});
_onUnhighlight() {
this.setState({active: false});
render() {
var colorStyle = {
color: this.state.active ? '#fff' : '#000',
onHideUnderlay={this._onUnhighlight}
onPress={this.props.onPress}
onShowUnderlay={this._onHighlight}
style={[styles.button, this.props.style]}
underlayColor="#a9d9d4"&
style={[styles.buttonText, colorStyle]}&{this.props.children}&
var ModalExample = React.createClass({
getInitialState() {
animated: true,
modalVisible: false,
transparent: false,
_setModalVisible(visible) {
this.setState({modalVisible: visible});
_toggleAnimated() {
this.setState({animated: !this.state.animated});
_toggleTransparent() {
this.setState({transparent: !this.state.transparent});
render() {
var modalBackgroundStyle = {
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
var innerContainerTransparentStyle = this.state.transparent
? {backgroundColor: '#fff', padding: 20}
animated={this.state.animated}
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={() =& {this._setModalVisible(false)}}
&View style={[styles.container, modalBackgroundStyle]}&
&View style={[styles.innerContainer, innerContainerTransparentStyle]}&
&Text&This modal was presented {this.state.animated ? 'with' : 'without'} animation.&/Text&
onPress={this._setModalVisible.bind(this, false)}
style={styles.modalButton}&
&View style={styles.row}&
&Text style={styles.rowTitle}&Animated&/Text&
&Switch value={this.state.animated} onValueChange={this._toggleAnimated} /&
&View style={styles.row}&
&Text style={styles.rowTitle}&Transparent&/Text&
&Switch value={this.state.transparent} onValueChange={this._toggleTransparent} /&
&Button onPress={this._setModalVisible.bind(this, true)}&
exports.examples = [
title: 'Modal Presentation',
description: 'Modals can be presented with or without animation',
render: () =& &ModalExample /&,
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
padding: 20,
innerContainer: {
borderRadius: 10,
alignItems: 'center',
alignItems: 'center',
flexDirection: 'row',
marginBottom: 20,
rowTitle: {
fontWeight: 'bold',
borderRadius: 5,
height: 44,
alignSelf: 'stretch',
justifyContent: 'center',
overflow: 'hidden',
buttonText: {
fontSize: 18,
margin: 5,
textAlign: 'center',
modalButton: {
marginTop: 10,
快速入门使用指南使用指南(iOS)使用指南(Android)组件API接口兼容(POLYFILLS)React Native中文网.(C) 2017 杭州欧石南网络科技有限公司浙ICP备号-3浙公网安备 11号react-native-router-flux调用react-native-modalbox本文出自汗血宝马，转载时请注明出处及相应链接。
本文永久链接: http://www.caotama.com/98866.html
Ɣ回顶部