如果您不熟悉React Native应用程序的样式化功能,可以很痛苦:Flexbox布局模块.虽然我们可以使用JavaScript来样式化,但理解和实施Flexbox布局对于React Native的用户界面开发是必不可少的。
<$>[注] Spoiler警告,我们不会在最后实施Flexbox! <$>
关于Flexbox
您可能已经熟悉 flexbox layout with CSS,并且React Native 实现的 Flexbox 几乎相同。Flexbox 是一个强大而高效的造型工具,用于构建用户界面,特别是移动界面。
React Native 中的 flex 属性与 CSS 相比略有不同,相反,它更像 CSS 中的 fr 单位,其中提供的数字值代表了所占空间的一部分。
除了flex属性与CSSflex短语属性不同,React Native的flexbox实现和CSS实现之间的另一个区别是React Native中的flex-direction默认值为列值。
让我们做它
在我们的示例项目中,我们将为AlligatorChef 创建一个定位页面,该页面自 1987 年以来一直是 Cajun Bacon 食谱的虚构来源。
<$>[注]我们完成后,我们的项目应该是这样的: <$>
如果你是新手React Native,我们的教程(https://andsky.com/tech/tutorials/react-react-native-getting-started)是为本教程做准备的明星方式。
React Native 快速启动
在您的终端中运行以下命令来创建一个新的 React Native 项目,更改到新的目录,启动该项目,然后输入i for iOS。
1$ create-react-native-app AlligatorChef
2$ cd AlligatorChef
3$ npm start
4$ i
我们这里有什么?
我们已经可以看到一个例子 Flexbox 被用在创建 React Native App**的初始代码中,在调用StyleSheet.create时使用flex字符串。
1[label App.js]
2const styles = StyleSheet.create({
3 container: {
4 flex: 1,
5 backgroundColor: '#fff',
6 alignItems: 'center',
7 justifyContent: 'center',
8 },
9});
这告诉我们,容器应该伸展,以适应整个屏幕。
下一步步骤
现在我们有我们的默认项目,让我们做一些修改。
让我们先为我们的标题添加两个文本元素。
取代:
1<Text>Open up App.js to start working on your app!</Text>
2<Text>Changes you make will automatically reload.</Text>
3<Text>Shake your phone to open the developer menu.</Text>
与:
1<Text style={styles.h1}>AlligatorChef</Text>
2<Text style={styles.h2}>Providing cajun bacon recipes since 1987.</Text>
没有太多要看的,对吧?让我们在StyleSheet中添加一些风格来调味它。在一个大片子里,用以下风格取代你所拥有的所有东西,包括默认容器。
1const styles = StyleSheet.create({
2 container: {
3 flex: 1,
4 justifyContent: 'space-between',
5 backgroundColor: '#000',
6 alignItems: 'center',
7 width: '100%',
8 },
9 h1: {
10 color: '#008F68',
11 fontSize: 40,
12 },
13 h2: {
14 color: '#FAE042',
15 fontSize: 18,
16 marginTop: 8,
17 },
18});
你可能注意到颜色和字体,但有一个闪闪发光的例子,可以解释为什么你的应用程序看起来有点宽敞。
我們從「中心」改變為「間隔」。如果我們將其改變為「中心」,一切都會看起來愉快和中心化,但我們還有更多要添加的東西。當使用「justifyContent:間隔」時,我們將每個項目均為屏幕頂部和底部間隔,這就是為什麼我們的「h1」粘在頂部和「h2」粘在底部。
图像和按钮
而不是立即解决这个问题,我们宁愿创造更多的混乱,让我们继续加一个图像和一个按钮。
用下面的代码替换您的当前代码,同时保持风格声明:
1import React from 'react';
2import { StyleSheet, Text, View, Button, Image } from 'react-native';
3import Logo from './assets/chef.png';
4
5export default class App extends React.Component {
6 render() {
7 return (
8 <View style={styles.container}>
9 <Text style={styles.h1}>AlligatorChef</Text>
10 <Text style={styles.h2}>Providing cajun bacon recipes since 1987.</Text>
11 <Image
12 source={Logo}
13 style={styles.image}
14 />
15 <Button
16 title="LET'S START"
17 style={styles.button}
18 onPress={() => this.onPress()}
19 color="#fff"
20 />
21 </View>
22 );
23 }
24}
25
26// ...
接下来,在根文件夹中,创建一个名为资产的文件夹. 一般来说,我们希望将图像保存在一个资产文件夹中,以便我们项目中的所有组件都能轻松访问。
React Native 对图像有点麻烦,可能会给您一些问题. 对于此使用案例,请确保您使用 png 图像。
<$>[警告] Oof. 不是我们想要的,对吗? <$>
风格
现在我们有我们所有的元素,它们看起来有点悲伤。
React Native 中的图像需要一个大小
作为React Native的最佳做法,我们总是需要给我们的图像一个大小。如果您有没有出现图像的问题,请确保您给它一个大小。正如您所看到的,我们已经给了图像一个风格的类,所以让我们给这个类一些属性。
1image: {
2 width: 300,
3 height: 260,
4 justifyContent: 'center',
5},
<$>[注]他现在看起来更容易管理! <$>
我的按钮不像一个按钮!
React Native 按钮也很容易选择,而不是打开和关闭<Button>与文本之间,React Native 需要一个标题支持,如果你看看上面提供的代码,你会注意到我们包含了它来避免一些错误。
React Native要求我们向按钮发送补丁,但它也要求我们为包含按钮的查看创建一个风格。
首先在您的代码中添加一个View与buttonContainer的类:
1<View style={styles.buttonContainer}>
2 <Button
3 title="LET'S START"
4 style={styles.button}
5 onPress={() => this.onPress()}
6 color="#fff"
7 />
8</View>
接下来,将以下内容添加到您的风格:
1buttonContainer: {
2 backgroundColor: '#008F68',
3 borderRadius: 5,
4 padding: 8,
5 margin: 8,
6},
<$>[注] 它看起来更像一个按钮! <$>
你准备好玩一些Flexbox了吗?
好了,让我们通过使用神奇的Flexbox来控制这个页面的其余部分。
如果你用以下代码取代你的初始代码,你会注意到一些新的类,‘topContainer’,‘middleContainer’和‘bottomContainer’。
1import React from "react";
2import {
3 StyleSheet,
4 Text,
5 View,
6 Button,
7 Image,
8 ProgressViewIOS
9} from "react-native";
10import Logo from "./assets/chef.png";
11
12export default class App extends React.Component {
13 render() {
14 return (
15 <View style={styles.container}>
16 <View style={styles.topContainer}>
17 <Text style={styles.h1}>AlligatorChef</Text>
18 <Text style={styles.h2}>
19 Providing cajun bacon recipes since 1987.
20 </Text>
21 </View>
22 <View style={styles.middleContainer}>
23 <Image source={Logo} style={styles.image} />
24 </View>
25 <ProgressViewIOS number={1} />
26 <View style={styles.bottomContainer}>
27 <View style={styles.buttonContainer}>
28 <Button
29 title="LET'S START"
30 style={styles.button}
31 onPress={() => this.onPress()}
32 color="#fff"
33 />
34 </View>
35 </View>
36 </View>
37 );
38 }
39}
让我们将这些类添加到当前的StyleSheet,看看一些魔法。
1topContainer: {
2 flex: 2,
3 justifyContent: 'center',
4 alignItems: 'center',
5},
6middleContainer: {
7 flex: 3,
8 justifyContent: 'flex-start',
9 alignItems: 'center',
10},
11bottomContainer: {
12 justifyContent: 'flex-end',
13 width: '90%',
14 margin: 20,
15 padding: 10,
16},
<$>[注] 神奇! <$>
让我们讨论Flexbox如何拯救了这一天
我们将flex: 2分配给topContainer,给它一个flex-grow值为2,因此它需要原来的container的2/5ths。
我们将‘flex: 3’分配给‘middleContainer’以取代原始‘container’的剩余3/5。而不是使用‘justifyContent:‘center’,我们使用了‘justifyContent:‘flex-start’。
最后,由于我们不关心按钮占用了多少页面,我们不需要指定 flexBasis. 我们只需要按钮位于页面底部,所以我们分配了bottomContainer``justifyContent:flex-end`。
这就是
虽然这只是一个一般的介绍,但Flexbox布局模块不仅可以提供React Native,还可以提供一般的Web开发。
永远不要忘记寻找复活节鸡蛋。