网站建设备案哪家好,aso应用商店优化,做区块链好的网站,交通运输局网站建设方案简要#xff1a;本系列文章讲会对expo进行全面的介绍#xff0c;本人从2017年6月份接触expo以来#xff0c;对expo的研究断断续续#xff0c;一路走来将近10个月#xff0c;废话不多说#xff0c;接下来你看到内容#xff0c;讲全部来与官网 我猜去全部机翻个人修改补充… 简要本系列文章讲会对expo进行全面的介绍本人从2017年6月份接触expo以来对expo的研究断断续续一路走来将近10个月废话不多说接下来你看到内容讲全部来与官网 我猜去全部机翻个人修改补充demo测试的形式对expo进行一次大补血欢迎加入expo兴趣学习交流群597732981 【之前我写过一些列关于expo和rn入门配置的东i西大家可以点击这里查看从零学习rn开发】 相关文章 Expo大作战(一)--什么是expo如何安装expo clinet和xdexde如何使用 Expo大作战(二)--expo的生命周期expo社区交流方式expo学习必备资源开发使用expo时关注的一些问题 Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expoexpo的局限性开发时项目选型注意点等 Expo大作战(四)--快速用expo构建一个appexpo中的关键术语 Expo大作战(五)--expo中app.json 文件的配置信息 Expo大作战(六)--expo开发模式expo中exp命令行工具expo中如何查看日志logexpo中的调试方式 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组件具有两个特殊功能 我们可以通过在每个屏幕组件上定义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中的路由RouteNavigation 欢迎大家关注我的微信公众号这篇文章是否被大家认可我的衡量标准就是公众号粉丝增长人数。欢迎大家转载但必须保留本人博客链接
