• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

常见的React Native App 布局：登录页面

ngkoma • 2年前 (2022-05-20) • JavaScript

在本系列中，您将学习如何使用 react Native 创建移动应用程序中常用的页面布局。您将要创建的布局不会是功能性的——相反，本系列的主要重点是让您在 React Native 应用程序中布局内容。

为了遵循本系列，我挑战您先尝试自己重新创建每个屏幕，然后再阅读本教程中的分步说明。仅仅通过阅读这个 React Native 登录表单教程，你不会真正受益匪浅！在此处查找答案之前先尝试。如果你成功地让它看起来像原始屏幕，将你的实现与我的进行比较。然后自己决定哪个更好！

在本系列的第一部分中，您将创建以下登录页面：

常见的React Native App 布局：登录页面 第1张

入门

在这个 React Native 登录屏幕教程中，我们将使用 Expo CLI。Expo 是一组围绕 React Native 和原生平台构建的工具和服务，可帮助您使用相同的 javascript 或 typescript 代码库在ios、android和 Web 应用程序上开发、构建、部署和快速迭代。 

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

创建一个新项目：

expo init LoginLayout

系统将提示您选择要初始化的项目类型。选择Managed workflow 和 空白。等待几秒钟让 Expo 安装项目文件并将目录更改为新项目。

cd LoginLayout

项目结构应如下所示。 

常见的React Native App 布局：登录页面 第2张

打开 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>  元素相当于 <div> html Web 开发中的元素。如您所见，该 View 组件有一个属性 ， style = {styles.container}用于 将样式应用于视图。

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

使用 flexbox 的布局

Flexbox 是 React Native 中的一项关键技术。它旨在在不同的屏幕尺寸上提供一致的布局。Flexbox 在 React Native 中的工作方式与在 Web 上的css中的工作方式相同，但有一些例外。（您可以 在此处了解 CSS Flexbox。）但默认值不同，flex 方向默认为 column 而不是 row，flex 参数仅支持单个数字。

常见的React Native App 布局：登录页面 第3张CSS 网格布局 CSS 网格与 Flexbox：您应该使用哪个以及何时使用？安娜莫努斯

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

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

  • 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 文件夹中添加一张图片。这将用作徽标图像。首先删除文本组件，并将其替换为徽标图像。不要忘记 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 元素都接受一个名为 的 prop  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
  );
}

我们使用 a 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 设置为 true 以出于安全目的隐藏在电子邮件文本输入中输入的文本。 

将以下样式添加到 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",
  },
});

这是应用程序的最终外观：

常见的React Native App 布局：登录页面 第4张

结论

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



文章目录
  • 入门
  • 使用 flexbox 的布局
  • 用户界面和通用组件
    • 添加图像
    • React Native 中的样式
    • 最终登录屏幕代码
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：常见的React Native App 布局：登录页面
    文章地址：https://www.weixiaolive.com/en/index.php/post/44.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云