Expo大作战(十二)--expo中的自定义样式Custom font,以及expo中的路由RouteNavigation

 

 

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网

我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981

【之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发】

相关文章:

Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xde如何使用

Expo大作战(二)--expo的生命周期,expo社区交流方式,expo学习必备资源,开发使用expo时关注的一些问题

Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等

Expo大作战(四)--快速用expo构建一个app,expo中的关键术语

Expo大作战(五)--expo中app.json 文件的配置信息

Expo大作战(六)--expo开发模式,expo中exp命令行工具,expo中如何查看日志log,expo中的调试方式

Expo大作战(七)--expo如何使用Genymotion模拟器

Expo大作战(八)--expo中的publish以及expo中的link,对link这块东西没有详细看,大家可以来和我交流

更多>>

接下来就开始撸码


使用自定义字体

iOS和Android都有自己的平台字体集,但如果您想在应用程序中注入更多品牌个性,精选字体可能会有很长的路要走。 在本指南中,我们将引导您为expo应用添加自定义字体。 在这个例子中,我们将使用来自谷歌字体的Open Sans,并且该过程对于其他任何字体都是相同的,因此可以随意将其与您的用例相匹配。 在继续之前,请继续并下载Open Sans

启动代码

首先让我们从一个基本的“Hello world!”应用程序开始。 在XDE/exp中创建一个新项目并将App.js更改为以下内容:

import React from 'react';
import {Text,View,
} from 'react-native';export default class App extends React.Component {render() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text style={{ fontSize: 56 }}>Hello, world!</Text></View>);}
}

在使用Open Sans之前,尝试让这个基本应用程序运行,这样您就可以确定当前项目没有什么问题。

下载字体

以您下载的Open Sans zip文件为例,将其解压并将OpenSans-Bold.ttf复制到项目中的资产目录中。 我们推荐的位置是your-project/assets/fonts

将字体加载到您的应用中

为了加载和使用字体,我们将使用expo的SDK,当您创建一个新的expo目时预装,但如果由于某种原因您没有它,您可以使用npm install --save expo安装在您的项目中 目录。 然后在您的应用程序代码中添加以下导入:

import { Font } from 'expo';

expo 类库提供了一个API,用于从JavaScript代码访问设备的本地功能。 font是处理字体相关任务的模块。 首先,我们必须使用Expo.Font.loadAsync()从我们的资产目录加载字体。 我们可以在App组件的componentDidMount()生命周期方法中执行此操作。 在App中添加以下方法:现在我们已将字体文件保存到磁盘并导入了Font SDK,接下来添加以下代码:

export default class App extends React.Component {componentDidMount() {Font.loadAsync({'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),});}// ...
}

这会加载Open Sans Bold,并将其与expo字体映射中的“open-sans-bold”名称相关联。 现在我们只需要在Text组件中引用这个字体。

注意:通过Expo加载的字体目前不支持fontWeight或fontStyle属性 - 您将需要加载字体的这些变体并按名称指定它们,正如我们在这里用粗体所做的那样。

在Text组件中使用字体

使用React Native,您可以使用fontFamily样式属性在文本组件中指定字体。 fontFamily是我们用于Font.loadAsync的关键。

<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>Hello, world!
</Text>

在下次刷新时,该应用程序似乎仍然不以Open Sans Bold显示文本。 您会看到它仍在使用默认的系统字体。 这是由于Expo.Font.loadAsync()是一个异步调用,需要一些时间才能完成。 在完成之前,Text组件已经使用默认字体呈现,因为它无法找到'open-sans-bold'字体(所以不会加载这个我们自定义的字体)。

在渲染之前等待加载字体

当字体完成加载时,我们需要一种重新呈现Text组件的方式。 我们可以通过在App组件的状态中保持一个boolean 值fontLoaded来跟踪字体是否已加载(We can do this by keeping a boolean value fontLoaded in the App component’s state that keeps track of whether the font has been loaded)。 只有在fontLoaded为true的情况下,我们才会呈现Text组件。

首先我们在App类的构造函数中初始化fontLoaded为false:

class App extends React.Component {state = {fontLoaded: false,};// ...
}

接下来,当字体完成加载时,我们必须将fontLoaded设置为true。 Expo.Font.loadAsync()返回一个Promise,当字体被成功加载并准备使用时,Promise被满足。 所以我们可以使用componentDidMount()的async / await等待字体加载,然后更新我们的状态。

class App extends React.Component {async componentDidMount() {await Font.loadAsync({'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),});this.setState({ fontLoaded: true });}// ...
}

最后,如果fontLoaded为true,我们只想渲染Text组件。 我们可以通过用以下代替Text元素来实现这一点:(完美

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>{this.state.fontLoaded ? (<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>Hello, world!</Text>) : null}
</View>

React Native会简单地忽略空的子元素,因此当fontLoaded为false时,会跳过呈现文本组件。 现在刷新应用程序,您将看到使用open-sans-bold。

为了方便起见,此技术内置于Tabs模板中,如您在此处所见。

注意:通常,您需要在显示应用程序之前加载应用程序的主要字体,以避免字体加载后文字闪烁。 推荐的方法是将Font.loadAsync调用移动到顶层组件

 

路由和导航

网络上的“单页面应用程序”不是具有单个屏幕的应用程序,这在大多数情况下确实无用( A“single page app” on the web is not an app with a single screen, that would indeed be useless most of the time);相反,它是一个不要求浏览器导航到每个新屏幕的新URL的应用程序。一个“单页面应用程序”将使用自己的路由子系统(例如:react-router)来分离正在显示的屏幕和URL栏。通常它也会更新URL栏,但是会覆盖会导致浏览器完全重新加载页面。这样做的目的是为了让体验流畅和“应用”。

这个相同的概念适用于本地移动应用当您导航到新屏幕时,不是刷新整个应用程序并从该屏幕重新开始,而是将屏幕推入导航堆栈并根据其配置将其动态显示到视图中。

我们推荐用于expo的路由和导航的类库是React Navigation。您可以在React Navigation网站上查看React Nativation的完整文档。

尝试一下

要熟悉React Navigation的能力,最好的方法就是试用React Navigation示例Expo应用程序。在这里你可以下载一个demo关于expo中reactnavigation的体验,体验完成,回到这里,继续阅读!

 

简介:最简单的导航配置

您可以通过将全部以下代码复制到App.js上一个全新的空白Expo项目中,并运行npm install react-navigation --save(安装react-navigation组件库)来执行此操作。

mport React from 'react';
import {Text,View,
} from 'react-native';import {StackNavigator,
} from 'react-navigation';class HomeScreen extends React.Component {static navigationOptions = {title: 'Home'};render() {return (<View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}><Text onPress={this._handlePress}>HomeScreen!</Text></View>)}_handlePress = () => {this.props.navigation.navigate('Home');}
}export default StackNavigator({Home: {screen: HomeScreen,},
});

React Navigation由“路由器”,“导航器”和“屏幕”组成。在这个例子中,我们导出一个新的StackNavigator作为我们应用程序的默认组件。 StackNavigator为我们的应用程序提供了一种在每个新屏幕放置在堆栈顶部的屏幕之间转换的方式。 StackNavigator为您的应用提供平台原生的外观和感觉;在iOS新屏幕从右侧滑入,同时也可以适当地为导航栏设置动画,在Android新屏幕上从底部淡入。

Navigator采用RouteConfig作为第一个选项,这是路由名称到屏幕的映射。

大多数情况下,屏幕是普通的React组件,具有两个特殊功能:

  1. 我们可以通过在每个屏幕组件上定义navigationOptions静态属性来为每个屏幕定义选项。在这个静态属性中,我们可以设置各种选项,例如标题,自定义左侧标题视图,或者当该屏幕可见时是否启用导航手势。

         2.一个特殊的navigation被传入组件。navigation提供帮助功能,用于读取当前导航状态以及导航到应用中的其他屏幕。在我们的示例应用程序中,在_handlePress方法中,我们调用      this.props.navigation.navigate以导航到Home路线并将其推送到我们的堆栈。

查看选项卡模板(Reviewing the tab template)

您可能不希望从头开始完全完成所有项目,并且选项卡模板是来自expo的许多项目之一,希望您能够在开发应用程序时获得领先地位。它配备了预先安装的react-navigation和tab-based navigation

让我们看看与导航相关的选项卡模板的项目结构。这不是你绝对必须遵循的模式,但是我们发现它对我们来说工作得很好。(一个简单的目录层次)

├── App.js
├── navigation
│   ├── RootNavigation.js
│   └── MainTabNavigator.js
├── screens
│   ├── HomeScreen.js
│   ├── LinksScreen.js
│   └── SettingsScreen.js

App.js

在Expo应用程序中,此文件包含于应用程序的根组件。在选项卡模板中,这是我们呈现RootNavigation组件的位置。

navigation/ RootNavigation.js

这个组件负责渲染我们的根导航布局。尽管在本例中我们使用基于tab的布局,但您可以在Android上使用抽屉布局,或者使用其他类型的布局。在模板中,我们在App.js中呈现的RootNavigation只会指向主屏幕,并且该屏幕中的每个选项卡都呈现自己的StackNavigator组件。

我们给这个组件的另一个责任是订阅推送通知,这样当收到或选择一个通知时,我们可以通过导航到一个新的路由进行响应。

 

navigation/ MainTabNavigator.js

在这个文件中,我们用三条路线,“主页”,“链接”和“设置”导出一个新的TabNavigator(In this file, we export a new TabNavigator with three routes, “Home”, “Links”, and “Settings”)。此外,我们在TabNavigator上配置了各种选项,例如定义默认tabBarIcon导航选项的功能,禁用动画,将选项卡栏设置在屏幕底部等。

 

screens/ * Screen.js

在我们的应用程序中代表屏幕的所有组件都被组织成一个屏幕目录(屏幕在任何地方都没有严格定义,取决于你决定你认为合适的东西 - 通常这通常是任何会被推送或弹出的东西堆栈)。

详细了解路由和导航(Learning more about routing & navigation)

react-navigation不是唯一的React Native路由库,但这是我们推荐的方法,我们可能无法回答您关于其他库的问题。您可以在Github和reactnavigation.org上了解更多信息。


 

下一张继续介绍,这一篇主要介绍了:expo中的自定义样式Custom font,以及expo中的路由Route&Navigation 欢迎大家关注我的微信公众号,这篇文章是否被大家认可,我的衡量标准就是公众号粉丝增长人数。欢迎大家转载,但必须保留本人博客链接!

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255222.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

悬浮按钮

效果图 //将dp转换为px public static int dip2px(Context context, float dpValue) {final float scale context.getResources().getDisplayMetrics().density;return (int) (dpValue * scale 0.5f); }//浮动图片监听 private void initListener() {//弹出对话框jianwen.set…

图像坐标:我想和世界坐标谈谈(A) 【计算机视觉学习笔记--双目视觉几何框架系列】

玉米竭力用轻松具体的描述来讲述双目三维重建中的一些数学问题。希望这样的方式让大家以一个轻松的心态阅读玉米的《计算机视觉学习笔记》双目视觉数学架构系列博客。这个系列博客旨在捋顺一下已标定的双目视觉中的数学主线。数学推导是有着几分枯燥的&#xff0c;但奇妙的计算…

img

转载于:https://www.cnblogs.com/SoulCode/p/6508720.html

图像坐标:我想和世界坐标谈谈(B)

二、图像坐标&#xff1a;我想和世界坐标谈谈(B) 玉米将在这篇博文中&#xff0c;对图像坐标与世界坐标的这场对话中涉及的第二个问题&#xff1a;谈话方式&#xff0c;进行总结。世界坐标是怎样变换进摄像机&#xff0c;投影成图像坐标的呢&#xff1f; 玉米做了一个简单的图示…

【Android】Fragment的简单笔记

被虐了&#xff0c;做某公司笔试时&#xff0c;发现自己连个Fragment的生命周期都写不详细。平时敲代码&#xff0c;有开发工具的便利&#xff0c;有网上各大神的文章&#xff0c;就算忘了也很容易的可以查到&#xff0c;但当要自己不借助外界&#xff0c;却发现自己似乎对该知…

三、致敬“张正友标定”

三、致敬“张正友标定” 此处“张正友标定”又称“张氏标定”&#xff0c;是指张正友教授于1998年提出的单平面棋盘格的摄像机标定方法。张氏标定法已经作为工具箱或封装好的函数被广泛应用。张氏标定的原文为“A Flexible New Technique forCamera Calibration”。此文中所提到…

Using KernelShark to analyze the real-time scheduler【转】

转自&#xff1a;https://lwn.net/Articles/425583/ This article brought to you by LWN subscribers Subscribers to LWN.net made this article — and everything that surrounds it — possible. If you appreciate our content, please buy a subscription and make the …

3、时间和随机数

一、时间 1.1 使用Calendar/[ˈkləndɚ]/类获取时间 1.1.1 常用方法 (1)public static Calendar getInstance&#xff08;&#xff09;: 使用默认时区和语言环境获取一个基于当前时间的Calendar对象。 (2)public int get(int field) 返回给定日历字段表示的日历部分的数字…

哥尼斯堡的“七桥问题” (欧拉回路,并查集)

哥尼斯堡的“七桥问题” (25分) 哥尼斯堡是位于普累格河上的一座城市&#xff0c;它包含两个岛屿及连接它们的七座桥&#xff0c;如下图所示。 可否走过这样的七座桥&#xff0c;而且每桥只走过一次&#xff1f;瑞士数学家欧拉(Leonhard Euler&#xff0c;1707—1783)最终解决…

无人驾驶汽车之争本田为何未战先败

摘要 : 本田汽车的研发部门对于汽车虽然理解深刻&#xff0c;但从整体而言&#xff0c;本田的造车理念还停留在上个时代&#xff0c;在未来的无人驾驶竞争中&#xff0c;本田已经有未战先啊败的苗头。 百度百家The BIG Talk硅谷站连续5小时的高密度头脑风暴&#xff0c;果然让人…

理解git结构与简单操作(四)合并分支的方法与策略

接上节&#xff0c;此时的dev分支与master分支的进度就不一样了&#xff0c;所以需要将dev分支与master分支同步。这里需要的就是合并分支的操作&#xff0c;大家应该都知道用git merge或者git rebase。 git merge merge&#xff0c;即「合并」。 fast-forward 当出现我们上面图…

摄像机标定

利用摄像机所拍摄到的图像来还原空间中的物体。在这里&#xff0c;不妨假设摄像机所拍摄到的图像与三维空间中的物体之间存在以下一种简单的线性关系&#xff1a;[像]M[物],这里&#xff0c;矩阵M可以看成是摄像机成像的几何模型。 M中的参数就是摄像机参数。通常&#xff0c;这…

Linux下Tomcat重新启动

在Linux系统下&#xff0c;重启Tomcat使用命令操作的&#xff01; 首先&#xff0c;进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh 查看Tomcat是否以关闭 ps -ef|grep java 如果显示以下相似信息&#xff0c;说明Tomcat还没有关闭 root …

大数据和人工智能的关系是什么?

何为大数据&#xff1f;何为人工智能&#xff1f; 大数据&#xff0c;百度百科上是这么定义的&#xff0c;指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合&#xff0c;是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率…

张正友标定法 【计算机视觉学习笔记--双目视觉几何框架系列】

三、致敬“张正友标定” 此处“张正友标定”又称“张氏标定”&#xff0c;是指张正友教授于1998年提出的单平面棋盘格的摄像机标定方法。张氏标定法已经作为工具箱或封装好的函数被广泛应用。张氏标定的原文为“A Flexible New Technique forCamera Calibration”。此文中所提到…

软工网络15个人阅读作业2——提问题

提出问题 快速通读教材《构建之法》&#xff0c;并参照提问模板&#xff0c;提出5个问题。 问题一&#xff1a; p83有一段话&#xff1a; 两人在一起合作&#xff0c;自然会出现不同意见&#xff0c;每个人都有自己的想法&#xff0c;在两个人平等合作的情况下&#xff0c;不存…

绝对路径VS相对路径

绝对路径&#xff1a;不必赘述&#xff0c;就是从盘符开始写直到找到你所需要的文件为止&#xff0c;把所有的目录写完整即可。但是在做网站的时候绝对不推荐用绝对路径&#xff0c;因为不可能服务器中的路径和在做设计时候所用的电脑的路径一致&#xff0c;也不可能说在服务器…

四、极大似然参数估计

四、极大似然参数估计 此篇博文&#xff0c;玉米将和大家分享一下“张氏标定”除几何推导外的另外一大精髓&#xff1a;参数估计。 张教授在大作“A Flexible New Technique for Camera Calibration”中的原话如下&#xff1a;” The above solution is obtained through minim…

xtrabackup安装使用

2019独角兽企业重金招聘Python工程师标准>>> 【MySQL】xtrabackup安装使用 拾荒者charley 关注 2018.03.19 09:19 字数 186 阅读 17评论 0喜欢 0 前言&#xff1a;说到MySQL备份&#xff0c;主要采用的方法无非就是mysqldump/mysqldumper以及我们今天要说的热备利器…

2017/3/10 morning

转载于:https://www.cnblogs.com/bgd140206325/p/6529497.html