React Native学习之编写静态界面需要注意的点

学习React Native也有四五天了…这几天在公司写了快有十来个界面

写这篇文章的目的是为了提醒自己，也希望能帮助到大家~

（本人纯小白 所以这篇文章比较基础）

一、详解一个简单的组件构成

首先上一串代码：

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

export default class FunctionTest extends React.Component {

    render() {
        return(
            <View>
                <Text>Hello World!</Text>
            </View>
        )
    }
}
           

在虚拟机上运行这串代码，就会在虚拟机上显示Hello World！字符。那为什么要这样写呢？

我们从头开始说：

字面上理解是从’react’导入react

然后我百度了一个，其实是因为：

因为打包工具是需要React.createElement这个方法把你写的jsx转化为虚拟DOM的

emmm是不是没太懂…真巧啊，我也不太懂，约定俗成往上套就完事了。有兴趣的小伙伴可以去百度了解一下。

其实从字面上就能理解，从“react native”导入{}

如果你下面的代码块中，用到什么组件，就需要在大括号里声明一下。列如我下面用到了Text还有View，所以在大括号里进行了添加。

export default class FunctionTest extends React.Component {
}
           

export default 主要用于导出一个模块（其实在我的理解就是，你在自己定义的类或者函数前面使用这个，就能在界面上展示出来了）。这里我设置了一个类FunctionTest 继承自React.Component。

之后使用一个render()渲染函数，返回一个HelloWorld！的Text文件。

这样第一部分就说完了，下面我来讲讲我在写界面时主要用到的东西。

二、flex弹性布局

flex弹性布局是我目前写界面主要用的布局方式，通过它的一些属性，可以规定组件在屏幕上的位置。

1. flex:1 自适应全屏幕

使用这个属性，那么它会自动填充整个页面。如果固定了一个视图的大小，那么也会自动充满。

2. flexDirection: ‘row’, 内容横向布局

将设置了这个属性的视图内的所有视图，全部横向布局。系统默认的是竖直布局。

3. justifyContent 主轴

如果你的内容布局方式是默认的，那么主轴就是竖直的。它其中也具备一些属性。

1. flex-start 所有视图从左到右 从最左边依次排开
2. flex-end 所有视图从右到左 从最右边依次排开
3. center 所有视图居中
4. space-between 两端对齐，所有视图依次排开 中间间隔相等
5. space-around 均匀的排布在行里 两端留一定的距离

4.alignItems 侧轴

与主轴相垂直的布局方式。也具备一些属性。

1. flex-start 顶部
2. flex-end 一直在底部
3. center 居中

弹性布局中主要用到的也就这几种了，其他的列如flexwrap对行进行操作。基本上很少用到。

三、用弹性布局写静态界面需要注意的几点

1. 很多时候我们根据UI给出的图，绘制静态界面时，一个东西的宽高都会设置成固定的大小。但是这样可能会因为手机分辨率的不同，显示出现问题。

   列如我刚开始写界面的时候，就很喜欢

后来在公司大佬的指导下，现在换成了

这个scale是他们之前封装好的一个函数，直接调用就好了，主要是用于适应不同分辨率的手机

export function scale(size: Number) {
    return size *  (screenW / X_WIDTH);
}
           

2.为了追求与UI出图一毛一样的效果。喜欢用marginRight等设置很远的边距。

列如这张图，清除按钮设置的位置。我刚开始写界面的时候，会用marginLeft:162来设置边距。这样可能会导致不同的手机，清除按钮的位置不同。但是

你可以用这个属性，直接将清除键放在最右边，然后用marginRight来设置边距，就会好得多。（但是其实TextInput中还有一个clearButtonMode属性 能直接设置是否需要清除按钮）

3.在Android原生开发中，我以前都喜欢自定义一个Button 然后通过设置border属性来改变边框的样式。但是在RN中，我发现很多时候都是通过设置一个Text，然后来设置Text的样式。直接加入一个button，会得到一个很丑的按钮。尽管也可以修改样式，但是具体的我没看了~

四、TextInput输入框相关属性

TextInput输入框在我们的开发中也有很重要的作用，现在就让我们来看看它的基本属性吧。

1. multiline = {true} //多行显示
2. password = {true} //密码隐藏 多行密码失效
3. placeholder = {‘我是占位文字’} //设置默认显示的文字
4. clearButtonMode={‘always’} //在输入文本右边是否显示清除按钮
5. keyboardType //可以决定你使用的是那种键盘

目前我主要使用的就这些。在使用TextInput的时候，我们也要注意点东西。

注：

在Android中，TextInput是自带一个边距的。刚开始不知道，所以好几次输入框都整的我有点懵。加上下面这个属性就好了。

五、总结

目前我写界面，主要碰到的问题就这些吧。因为静态界面，除了花时间以外，也没有什么技术难点。下周我将开始，对静态页面进行一些逻辑上的操作，比如点击事件、跳转、倒计时等等。

要学会努力的提升自己呀~