如何使用React Native来创建移动应用中常用的页面布局

在这个系列中，你将学习如何使用React Native来创建移动应用中常用的页面布局。你将创建的布局不会是功能性的--相反，这个系列的主要重点是让你在React Native应用程序中布置内容时弄脏自己的手。

如果你对React Native应用的布局或一般的风格设计感到陌生，请查看我们关于React Native中的布局的教程。

• [

要跟上这个系列，我向你挑战，在阅读我在教程中的一步步说明之前，先尝试自己重新创建每个屏幕。仅仅通过阅读这个React Native登录表单教程，你并不会真正受益于它!先试一试，再在这里找答案。如果你成功地使它看起来像原来的屏幕，把你的实现和我的进行比较。然后自己决定哪一个更好!

在本系列的第一部分，你将创建以下的登录页面。

入门

在这个React Native登录页面的教程中，我们将使用Expo CLI。Expo是一套围绕React Native和原生平台的工具和服务，帮助你从同一个JavaScript或TypeScript代码库中开发、构建、部署并快速迭代iOS、Android和Web应用。

Expo是构建React Native应用的最简单、最快速的方式。官方的Expo入门指南包含了关于如何下载和配置主要操作系统的Expo CLI的详细说明。

创建一个新的项目。

expo init LoginLayout

你会被提示选择要初始化的项目类型。选择托管工作流和空白。等待几秒钟，让Expo安装项目文件，并将目录改成新项目。

cd LoginLayout

项目的结构应该是这样的。

打开App.js ，开始处理你的应用程序。开始的代码App.js ，看起来应该是这样的。

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

在第二行代码中，我们导入React ，以使用JSX。然后我们从React Native导入StyleSheet 、Text 、View 组件。

接下来是App 函数，它返回一个视图组件和一个文本组件作为该组件的子组件。<View> 是React Native中的一个重要组件，它可以有很多用途，比如对不同的元素进行造型，包装元素，或嵌套元素。<View> 元素相当于HTML网页开发中的<div> 。正如你所看到的，View 组件有一个属性，style = {styles.container} ，它被用来对视图应用样式。

<Text> 组件允许我们渲染文本。

使用Flexbox的布局

Flexbox是React Native的一个关键技术。它被设计用来在不同的屏幕尺寸上提供一个一致的布局。Flexbox在React Native中的工作方式与它在网络上的CSS中的工作方式相同，但有一些例外。(你可以在这里了解CSS Flexbox。)不过默认值是不同的，flex方向默认为列而不是行，flex参数只支持一个数字。

• [

Flex定义了项目如何沿着主轴填充可用空间。可用空间是根据每个元素的flex属性来划分的。

我们在文件底部的styles 常量中定义了flexbox布局。容器有以下样式。

• flex: 1:这定义了元素将如何填充在空间上。空间通常根据每个元素的flex属性来划分。
• justifyContent: "center":这使容器的子元素在容器的主轴中心对齐。
• alignItems: "center":使容器的子元素在容器的十字轴的中心对齐。

用户界面和通用组件

一个典型的React Native将使用以下组件。

View	其他组件的一个容器
Text	显示文本
Image	显示图片
Stylesheet	提供一个元素的造型方式
TextInput	一个输入字段
Button	一个可点击的按钮

添加图片

React Native中的图片被放置在assets文件夹中，像这样被引用。

<Image source={require('.assets//image.png')} />

让我们在assets文件夹中添加一张图片。这将被用作标识图片。首先删除文本组件，然后用logo图片代替它。不要忘记导入顶部的Image 组件。

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

export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Image source = {require("./assets/logo.png")}/>
      </View>
    );
  }
}

React Native中的样式设计

React Native中的元素是用JavaScript进行造型的。所有的React Native元素都接受一个名为style 的道具，它接受一个带有样式名称和值的对象。这些样式名称和值与CSS中使用的样式名称和值类似，只是名称使用骆驼的大小写。例如，React Native使用backgroundColor 作为CSS属性background-color 。

在图片上添加以下样式。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
   },

   image :{
    marginBottom: 40

  }
    
});

这里我们添加一个marginBottom: 40 样式，在图片和文本输入之间留出一些空间。

接下来，为电子邮件和密码添加文本输入字段。首先，添加状态属性来保存电子邮件和密码。React Native中的状态是用在随时间变化的组件上。例如，TextInput 中的信息随着用户输入信息而不断变化。电子邮件和密码的初始状态将是空的。

首先导入useState ，如下图所示。useState 函数将允许我们的功能组件是有状态的。

import React, { useState } from 'react';

然后通过在App 函数中添加以下代码来初始化状态。

export default function App() {
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
  return (
    // rest of the code
  );
}

我们用一个View 来包装每个文本输入，以方便样式设计。在图片下面添加这段代码。

      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Email."
          placeholderTextColor="#003f5c"
          onChangeText={(email) => setEmail(email)}
        />
      </View>

      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Password."
          placeholderTextColor="#003f5c"
          secureTextEntry={true}
          onChangeText={(password) => setPassword(password)}
        />
      </View>

setState 方法将用用户输入的任何信息更新状态对象。为了安全起见，secureTextEntry 被设置为真，以隐藏在电子邮件文本输入中输入的文本。

在inputView 和textInput 道具中添加以下样式。

 inputView: {
    backgroundColor: "#FFC0CB",
    borderRadius: 30,
    width: "70%",
    height: 45,
    marginBottom: 20,
    alignItems: "center",
  },

  TextInput: {
    height: 50,
    flex: 1,
    padding: 10,
    marginLeft: 20,
  }

在文本输入字段下面添加忘记密码的按钮。我们将使用一个TouchableOpacity 按钮，按下后会改变不透明度。

      <TouchableOpacity>
        <Text style={styles.forgot_button}>Forgot Password?</Text>
      </TouchableOpacity>

接下来，为忘记密码按钮添加以下样式。

  forgot_button: {
    height: 30,
    marginBottom: 30,
  }

最后，添加 "登录"按钮。在忘记密码按钮下面添加下面的代码。

      <TouchableOpacity style={styles.loginBtn}>
        <Text style={styles.loginText}>LOGIN</Text>
      </TouchableOpacity>

添加登录按钮的样式。

 loginBtn:
  {
    width:"80%",
    borderRadius:25,
    height:50,
    alignItems:"center",
    justifyContent:"center",
    marginTop:40,
    backgroundColor:"#FF1493",
  }

在这里，我们添加一个边框半径样式，使按钮成为圆形，并添加一个marginTop: 40 属性，使两个按钮之间形成一个空间。我们还设置了一个自定义的高度和宽度。

最后的登录屏幕代码

登录页面的最终React Native代码，App.js，应该看起来像这样。

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Button,
  TouchableOpacity,
} from "react-native";

export default function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <View style={styles.container}>
      <Image style={styles.image} source={require("./assets/log2.png")} />

      <StatusBar style="auto" />
      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Email."
          placeholderTextColor="#003f5c"
          onChangeText={(email) => setEmail(email)}
        />
      </View>

      <View style={styles.inputView}>
        <TextInput
          style={styles.TextInput}
          placeholder="Password."
          placeholderTextColor="#003f5c"
          secureTextEntry={true}
          onChangeText={(password) => setPassword(password)}
        />
      </View>

      <TouchableOpacity>
        <Text style={styles.forgot_button}>Forgot Password?</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.loginBtn}>
        <Text style={styles.loginText}>LOGIN</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },

  image: {
    marginBottom: 40,
  },

  inputView: {
    backgroundColor: "#FFC0CB",
    borderRadius: 30,
    width: "70%",
    height: 45,
    marginBottom: 20,

    alignItems: "center",
  },

  TextInput: {
    height: 50,
    flex: 1,
    padding: 10,
    marginLeft: 20,
  },

  forgot_button: {
    height: 30,
    marginBottom: 30,
  },

  loginBtn: {
    width: "80%",
    borderRadius: 25,
    height: 50,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 40,
    backgroundColor: "#FF1493",
  },
});

这里是应用程序的最终外观。

来自CodeCanyon的流行React Native应用程序布局模板

构建一个伟大的应用程序需要的不仅仅是一个React Native登录屏幕。如果你需要更多的组件来完成你的项目，请查看CodeCanyon的这些模板。它们很容易使用，可以帮助你实现你的目标。

1.MStore Pro-完整的React Native电子商务模板

MStore Pro是CodeCanyon上最受欢迎的React Native模板之一。它的设计考虑到了电子商务。它有一个有用的React Native登录屏幕模板，与短信注册一起工作。它也有多个主屏幕和布局可供选择。

[

2.Antiqueruby React Native Material Design UI组件

材料设计仍然主导着应用程序的格局，这使得Antiqueruby成为2021年的绝佳选择。该下载包括260多个屏幕，包括React Native登录、导航抽屉等。

3.React App Builder-SaaS

React App Builder的作用正如其名。用这个模板下载中包含的组件做出令人敬畏的创意项目。它包括在任何行业制作一个完整的应用程序所需的一切。

[

4.BeoNews Pro-React Native Mobile App for WordPress

如果你有一个WordPress网站，你想成为移动网站，请尝试BeoNews Pro。它是CodeCanyon上的顶级模板之一，它充满了伟大的功能。除了它的React Native登录界面模板外，BeoNews Pro还包括。

• 多种侧边菜单样式
• 时尚的 UI 布局
• Facebook、Google和Firebase分析集成

[

5.Oreo Fashion-完整的React Native App for WooCommerce

用Oreo Fashion展示你的风格感。这是一个完整的模板，让你为iOS和Android设备创建应用程序。所包含的React Native登录表单为账户创建提供了简单的社交注册。你也可以利用布局应用程序生成器的优势。如果你有一个WooCommerce WordPress网站，想围绕它建立一个应用程序，可以试试。

总结

在本教程中，你已经利用你的Flexbox知识成功创建了一个漂亮的登录页面。你还学会了如何使用Expo CLI，这是一种构建和测试React Native应用的简单方法。