使用Flexbox在ReactNative中构建登录页面

如果您不熟悉 React Native 应用程序的样式设计强大功能：Flexbox 布局模块，那么为它设计样式可能会非常痛苦。虽然我们可以使用 JavaScript 进行样式设置，但理解和实现 Flexbox 布局对于使用 React Native 进行 UI 开发是绝对必要的。在本演练中，我们将使用 Flexbox 构建登录页面。

剧透警告，直到最后我们才会实现 Flexbox！

关于弹性盒

您可能已经熟悉使用 CSS 的 flexbox 布局，React Native 的 Flexbox 实现几乎相同。 Flexbox 是一款功能强大且高效的样式工具，针对构建用户界面进行了优化，尤其适用于移动界面。通过在组件样式中使用 flex 属性，我们可以根据可用空间动态放大和缩小。

React Native 中的 flex 属性与 CSS 中的有点不同，而是更像 CSS 中的 fr 单元，其中提供的数值代表了占用的空间。所以在 React Native 中 flex 只需要一个简单的数值。

除了 flex 属性与 CSS flex 速记属性不同之外，React Native 的 flexbox 实现和 CSS 实现之间的另一个区别是 flex-direction 默认为React Native 中列的值。

我们开始做吧

在我们的示例项目中，我们将为 AlligatorChef 🐊 构建一个登录页面，这是自 1987 年以来卡真培根食谱的第一虚构来源。

以下是我们的项目完成后的样子：

🐥 如果您是 React Native 的新手，我们的教程 React Native 和 Expo 入门是准备本教程的绝佳方式。

🚀 React Native 快速入门

在您的终端中运行以下命令创建一个新的 React Native 项目，切换到新目录，启动项目，然后输入 i for iOS。

$ create-react-native-app AlligatorChef
$ cd AlligatorChef
$ npm start
$ i

我们有什么在这里？

我们已经可以看到在使用 Create React Native App 获得的初始代码中使用了 Flexbox 的示例，并在对 StyleSheet.create 的调用中使用了 flex 属性。看一下 App.js 文件。似乎他们可能在暗示我们 Flexbox 是 React Native 中样式的关键：

应用程序.js

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

这告诉我们容器应该拉伸以适应整个屏幕。

下一步

现在我们有了默认项目，让我们进行一些修改。

让我们首先为我们的标题添加两个 Text 元素。

代替：

<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>

和：

<Text style={styles.h1}>AlligatorChef</Text>
<Text style={styles.h2}>Providing cajun bacon recipes since 1987.</Text>

没什么可看的，对吧？让我们在 StyleSheet 中添加一些样式来增加趣味。一口气，用以下样式替换您拥有的所有内容，包括默认容器。你的 StyleSheet 现在应该看起来像这样：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#000',
    alignItems: 'center',
    width: '100%',
  },
  h1: {
    color: '#008F68',
    fontSize: 40,
  },
  h2: {
    color: '#FAE042',
    fontSize: 18,
    marginTop: 8,
  },
});

让我们谈谈我们刚刚更改的内容。您可能注意到了颜色和字体，但有一个精彩的示例可以解释为什么您的应用看起来有点空旷。

我们将 justifyContent 从 center 更改为 space-between。如果我们把它改回 center，一切看起来会很开心并且再次居中，但我们还有很多东西要添加。当使用 justifyContent: 'space-between' 时，我们让每个项目在屏幕的顶部和底部之间均匀分布。这就是为什么我们的 h1 粘在顶部而 h2 粘在底部的原因。

图像和按钮

与其立即解决这个问题，我们宁愿制造更多的混乱。让我们继续添加一个 Image 和一个 Button。

用下面的代码替换您当前的代码，同时保留 styles 声明：

import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import Logo from './assets/chef.png';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.h1}>AlligatorChef</Text>
        <Text style={styles.h2}>Providing cajun bacon recipes since 1987.</Text>
        <Image
          source={Logo}
          style={styles.image}
        />
        <Button
          title="LET'S START"
          style={styles.button}
          onPress={() => this.onPress()}
          color="#fff"
        />
      </View>
    );
  }
}

// ...

接下来，在 root 文件夹中，创建一个名为 assets 的文件夹。通常，我们喜欢将图像保存在 assets 文件夹中，以便项目中的所有组件都可以轻松访问。将您想用作 AlligatorChef 🐊 徽标的图像文件添加到此文件夹。

React Native 对图像有点变化无常，可能会给您带来一些问题。对于此用例，请确保您使用的是 png 图像。

钱币。不是我们想要的，对吧？ 🌵

造型

现在我们有了所有的元素，它们看起来有点难过。让我们解决这个问题。

React Native 中的图像需要大小

作为 React Native 的最佳实践，我们总是需要给我们的图像一个大小。如果您遇到图像未显示的问题，请确保为它分配尺寸。正如你所看到的，我们已经在它的 style 属性中给图像一个类，所以让我们给这个类一些属性。在你的 StyleSheet 添加下面的行来驯服那个大鳄鱼。

image: {
  width: 300,
  height: 260,
  justifyContent: 'center',
},

他现在看起来更容易管理了！

我的按钮看起来不像按钮！

React Native 按钮也很挑剔。 React Native 需要一个 title 属性，而不是在 <Button> 之间有文本的打开和关闭。如果您查看上面提供的代码，您会注意到我们将其包含在内以避免一些错误。

React Native 需要我们向 Button 发送 props，但它也需要我们为包含按钮的 View 创建一个样式。让我们继续为我们的 StyleSheet 添加一个容器和一个类。

首先在您的代码中添加一个 View 和 buttonContainer 类：

<View style={styles.buttonContainer}>
  <Button
    title="LET'S START"
    style={styles.button}
    onPress={() => this.onPress()}
    color="#fff"
  />
</View>

接下来，将以下内容添加到您的样式表中：

buttonContainer: {
  backgroundColor: '#008F68',
  borderRadius: 5,
  padding: 8,
  margin: 8,
},

这看起来更像是一个按钮！

您准备好使用 Flexbox 了吗？！

好的，让我们使用神奇的 Flexbox 来控制这个页面的其余部分。你准备好了吗？ 🏀

我们将首先在原始容器中添加三个 container。如果您将初始代码替换为以下代码，您会注意到一些新类，topContainer、middleContainer 和 bottomContainer。

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  ProgressViewIOS
} from "react-native";
import Logo from "./assets/chef.png";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.topContainer}>
          <Text style={styles.h1}>AlligatorChef</Text>
          <Text style={styles.h2}>
            Providing cajun bacon recipes since 1987.
          </Text>
        </View>
        <View style={styles.middleContainer}>
          <Image source={Logo} style={styles.image} />
        </View>
        <ProgressViewIOS number={1} />
        <View style={styles.bottomContainer}>
          <View style={styles.buttonContainer}>
            <Button
              title="LET'S START"
              style={styles.button}
              onPress={() => this.onPress()}
              color="#fff"
            />
          </View>
        </View>
      </View>
    );
  }
}

让我们将这些类添加到我们当前的 StyleSheet 中，看看有什么魔力。

topContainer: {
  flex: 2,
  justifyContent: 'center',
  alignItems: 'center',
},
middleContainer: {
  flex: 3,
  justifyContent: 'flex-start',
  alignItems: 'center',
},
bottomContainer: {
  justifyContent: 'flex-end',
  width: '90%',
  margin: 20,
  padding: 10,
},

✨魔法！✨

让我们讨论一下 Flexbox 是如何拯救这一天的

我们将 flex: 2 分配给 topContainer，赋予其 flex-grow 值为 2，因此它占用原始 container 的 2/5。我们还告诉它对齐并证明中心的所有内容。请查看下面的屏幕截图以获取可视化演示。

我们将 flex: 3 分配给 middleContainer 以获取原始 container 的剩余 3/5。我们没有使用 justifyContent: 'center'，而是使用了 justifyContent: 'flex-start'。这就是为什么我们的 AlligatorChef 🐊 图像与 middleContainer 的顶部对齐的原因。

最后，因为我们不关心 Button 占据了多少页面，所以我们不需要指定 flexBasis。我们只需要按钮在页面底部，所以我们分配bottomContainer justifyContent: 'flex-end'。

就是这样🐿

虽然这只是一个一般性的介绍，但 Flexbox 布局模块不仅可以为 React Native 提供大量的功能，还可以用于一般的 Web 开发。

👉永远记得寻找复活节彩蛋。 🤓