前言

完成了环境搭建，自然就需要完成一些小demo来试试react-native的能力。从官方网站和其他网站上学了一些基础组件的使用，下面从以下几个问题进行RN页面组件的尝试。

基础组件的尝试：View、SafeAreaView、Image、Text、Button、FlatList等等
如何在代码中区分ios还是android
如何使用样式
如何进行布局
如何使用webview组件

基础组件的简单使用

常用的基础组件有

View 标准的视图组件，可以理解为Web中的div
Text 文本展示组件，如果想显示文本信息那么就需要使用Text
Button 按钮组件，在ios和android上表现不同，这个组件的样式是固定的，所以如果它的外观并不怎么搭配你的设计，那你需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮。
Touchable 系列组件，为了解决Button组件样式固定的问题而生。
Image 用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

请注意对于网络和 base64 数据的图片需要手动指定尺寸！

ScrollView 滚动View组件
SafeAreaView 安全视图，具体来说就是因为目前有 iPhone X 这样的带有“刘海”的全面屏设备，所以需要避免内容渲染到不可见的“刘海”范围内。本组件目前仅支持 iOS 设备以及 iOS 11 或更高版本
FlatList 高性能简单的列表组件，功能强大
SectionList 高性能的分组列表

上述都是RN比较常用的原生组件，至于每个组件的用法可以去官方详细查看API

如何在代码中区分ios还是android

React Native 提供了两种方法来区分平台：

使用Platform模块.
使用特定平台扩展名.

Platform 模块

React Native 提供了一个检测当前运行平台的模块。如果组件只有一小部分代码需要依据平台定制，那么这个模块就可以派上用场。

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100
});

特定平台扩展名

当不同平台的代码逻辑较为复杂时，最好是放到不同的文件里，这时候我们可以使用特定平台扩展名。React Native 会检测某个文件是否具有.ios.或是.android.的扩展名，然后根据当前运行的平台自动加载正确对应的文件。

比如你可以在项目中创建下面这样的组件：

BigButton.ios.js
BigButton.android.js

然后去掉平台扩展名直接引用：

import BigButton from './BigButton';

React Native 会根据运行平台的不同自动引入正确对应的组件。

如果你还希望在 web 端复用 React Native 的代码，那么还可以使用.native.js的扩展名。

另外有些内置组件的某些属性可能只在特定平台上有效 Platform

如何使用样式

在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的 JavaScript 对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const LotsOfStyles = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigBlue}>just bigBlue</Text>
        <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
        <Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

export default LotsOfStyles;

单位不用使用px

和传统的css不同，设置组件盒子模型等等单位不需要写，比如margin、padding、width、height、border等属性设置大小时不需要写单位，如下：

import React from 'react';
import { View } from 'react-native';

const FixedDimensionsBasics = () => {
  return (
    <View>
      <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
      <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
      <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
    </View>
  );
};

export default FixedDimensionsBasics;

弹性（Flex）宽高

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

import React from 'react';
import { View } from 'react-native';

const FlexDimensionsBasics = () => {
  return (
    // 试试去掉父View中的`flex: 1`。
    // 则父View不再具有尺寸，因此子组件也无法再撑开。
    // 然后再用`height: 300`来代替父View的`flex: 1`试试看？
    <View style={{flex: 1}}>
      <View style={{flex: 1, backgroundColor: 'powderblue'}} />
      <View style={{flex: 2, backgroundColor: 'skyblue'}} />
      <View style={{flex: 3, backgroundColor: 'steelblue'}} />
    </View>
  );
};

export default FlexDimensionsBasics;

如何进行布局

在RN中，使用类似于css的flex布局，包括样式名称都一样，只不过换成了驼峰写法。例如：flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

如果对Flex布局完全不认识的人，可以看看Web端的Css Flex，推荐看看阮一峰老师的《Flex 布局教程:语法篇》

如何使用webview组件

WebView 创建⼀个原⽣的 WebView，可以⽤于访问⼀个⽹⻚.新版的RN已经⽤react-native-webview替代RN原⽣Core中的WebView，所以需要安装一个react-native-webview插件。

安装

直接使用npm或者yarn安装

npm i react-native-webview -S
# or yarn
yarn react-native-webview

如果是RN大于60，则

# 进入工程的ios目录
cd ios
pod install

之后这个WebView的第三方组件就安装完成了。

使用

使用也很简单，如下：

import React, { Component } from 'react'
import {View } from 'react-native'
import { WebView } from "react-native-webview";

export default class index extends Component {


    render() {

        return (
            <View style={{flex:1}}>
                <WebView
                    source={{ uri: 'https://www.baidu.com' }}
                    style={{ marginTop: 20 }}
                />
            </View>
        )
    }
}

React-Native 0.63踩坑之旅--react-native基础组件的使用

目录

前言