reactnative实战教程（如何使用react native）

本文目录

• 如何使用react native
• 如何学习 react native
• React Native 速成 002 — 使用 UI框架 React Native Elements
• React Native（五）实现列表
• React Native 之组件详解

如何使用react native

1. 安装react-native-camera 进入项目的根目录，即package.json的目录。打开终端，使用npm安装最新版本，如果没有错误，则说明安装成功： npm install react-native-camera@latest --save 安装成功后，就可以在项目的node_modules目录下看到

如何学习 react native

1、启动package server —-react-native start 2、运行android项目 —react-native run-android 3、重装项目 —-gradlew installDebug天津众 维原画设计

React Native 速成 002 — 使用 UI框架 React Native Elements

React Native Elements 是一款 React Native 的UI框架，风格配色均属上乘，框架封装了很多常用组件，用来搭建产品原型非常方便。

***隐藏网址***

通过上一节的 CRNA 创建的 app，自带了react-native-vector-icons ，所以可以非常方便的安装它react-native-elements。

我们首先直接在 App.js 中试试它的组件吧。

我们先来尝试基础组件，其中有Button，Badge，Social Icon，Icon等，可以在 这里 查看它们的使用文档。

基础组件的使用比较简单，直接 import from ’react-native-elements’ 后调用即可，这里不再详细叙述。我们主要看看一些常用的复杂组件。smart和dumb组件的划分可以看之前的文章。

首先我们来看 Card 卡片组件，通常用来显示一个或者系列项目。

这里我们在项目文件夹下添加 images 子文件夹，然后使用
image={require(’./images/card.jpg’)}》 添加文件。
同时，也可以指定image的uri来添加图片
***隐藏网址***

效果如下：

倘若多个 Card 一个 View 里面放不下怎么办？

那我们将要使用 ScrollView。

ScrollView
是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal
属性来设置）。

这里我们引入它 import { ScrollView } from ’react-native’;

然后将原先的 View 替换成 ScrollView 即可。

ScrollView适合用来显示数量不多的滚动元素。放置在ScollView
中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的ListView组件。之后我们也会学习 如何使用ListView 。

React Native（五）实现列表

一、ListView已被弃用。新版React Native推荐使用FlatList。
在React Native0.43版本中引入了FlatList,SectionList与VirtualizedList，其中VirtualizedList是FlatList 与 SectionList 的底层实现。

二、关于把 FlatList 或 SectionList 控件放在 ScrollView 中的时候，调试的时候会有如下黄盒警告：
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

FlatList 和 SectionList 都是用的 Virtualized Lists。Virtualized Lists， 是一种带有性能优化的 List，在 List 很大时Virtualized Lists有明显的内存优化结果。怎么个优化法呢？例如一个 List 有一千个 Cell，如果没有优化，这一千个 Cell 都会被渲染并保持在内存中，内存会明显升高。Virtualized lists 的做法是，只让显示在屏幕上的 Cell 渲染，其它的没有显示在屏幕上的 Cell 销毁。这样就节省很多内存。

原因：那现在你把 Virtualized List 放在 ScrollView 中，ScrollView 是要全部渲染的，那么 Virtualized List 就计算不出来哪些 Cell 目前显示在屏幕上，会渲染所有的 Cell，那么它的优势就显现不出来了。这个时候就会抛出上述警告。

解决方法：把要一起滚动的组件放在 FlatList 的 ListHeaderComponent 或 ListFooterComponent 中。这样就不需要 ScrollView 了。

改之前：
render() {
return (
《ScrollView》
《Title》Welcome《/Title》
《Text》Take a look at the list of recipes below:《/Text》
《FlatList
data={recipes}
renderItem={renderItem}
/》
《Footer/》
《/ScrollView》
);
}

改之后：
render() {
return (
《FlatList
LisHeaderComponent={
《》
《Title》Welcome《/Title》
《Text》Take a look at the list of recipes below:《/Text》
《/》}
data={recipes}
renderItem={renderItem}
ListFooterComponent={
《Footer/》
}/》
);
}

React Native 之组件详解

引言
由于我忙于当前的项目，暂未更新，现在继续和大家一起去React Native门派学习，相信通过前几篇文章的介绍，我们对React Native门派有了一个大致了解，并且基本上搭建好了环境以及完成了新手村长的任务，写出了万门之祖的Hello world，那么接下来我们将逐一的了解，React Native中的每一个组件师兄，剖析他们的构成以及属性。咱们还是老套路直奔主题，上干货。

在学习各个组件之前，我们先学习一下Flexbox布局即这些组件如何排布布局的，如果你学过CSS布局，那么React Native中的Flexbox的工作原理与CSS基本一样的，没接触过也没关系，我们一起重头学习。

flexDirection可以决定布局的主轴的方向，即子元素是横着排布还是竖着排布，

justifyContent可以决定其子元素沿着主轴的排列方式，即对齐方式

alignItems可以决定其子元素沿着次轴的对齐方式

如果项目未设置高度或设为auto，将占满整个容器的高度（要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸）

项目的第一行文字的基线对齐。

水平或垂直布局时：如果子View放不下，则自动换行, 默认为’nowrap’(不换行)

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

权重，类似Android中weight
当flex取正整数值时是一个正数, 它使组件具有灵活性, 并且它的大小与其 flex 值成正比。因此, 将flex设置为2的组件将占用空间的两倍, 作为具有flex设置为1的组件。
当flex为0时, 该组件根据width和height进行调整, 并且不灵活。
当flex为-1 时, 组件通常根据width和height进行调整。但是, 如果没有足够的空间, 组件将收缩到其minWidth和minHeight.

flexGrow、flexShrink 和 flexBasis 的工作与 CSS 相同。

定位模式，分为absolute和relative两种

即绝对定位，相对于父组件的位置

相对定位，相对于当前位置

定位的元素及其子代的zIndex顺序。当元素重叠时, zIndex顺序决定哪一个覆盖另一个。具有较大z-index的元素通常覆盖具有较低的元素

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离，下面这张是CSS的效果图，只是名字不一样（marginTop），原理都是一样；

除了图上那些属性还有如下属性

marginTop, marginLeft, marginBottom, marginRight
marginHorizontal: 水平外距离相当于marginLeft和marginRight
marginVertical:垂直外距离相当于marginTop和marginBottom

borderWidth,borderTopWidth,borderLeftWidth,borderBottomWidth,borderRightWidth

paddingTop,paddingBottom,paddingLef,paddingRight
paddingHorizontal: 水平内距离相当于paddingLeft和paddingRight
paddingVertical:垂直内距离相当于paddingTop和paddingBottom

指定在其块级容器的大小太大时, 是剪辑内容、显示滚动条还是显示溢出的内容.