在React Native中构建主题应用程序的简单食谱
最近，我一直在研究一个React Native应用程序，该应用程序需要根据用户选择来改变主题。 我想以最简单的方式做到这一点。 到目前为止，我避免使用任何React Native UI工具包，例如NativeBase或React Native Elements。 在下面的文章中，我将与大家分享这个简单的食谱。
这就是我们正在建设的。 到本文结尾，您将拥有一个外观类似的React Native项目。
要求
您可以在此处的Github存储库中克隆应用程序以查看其工作方式，以查看一切正常运行。 或者，您可以逐步阅读本文。 它是由你决定。 首先，使用您选择的生成器生成react native应用。 我们必须选择：
react-native cli- expli-cli / CRNA
我将使用expo-cli进行演示，但如果需要，可以使用CRNA（Create-React-Native-Project）。 在开始之前，我们需要在项目中安装以下依赖项。
- 还原
- redux-logger（可选，如果出现任何问题，最好进行调试）
- 反应导航
- react-native-vector-icons（仅在使用react-native-cli时安装）
入门：导航
我们只需要两个屏幕即可进行演示。 我将它们Home.js和Theme.js 。 两者现在都只包含样板代码。 在我们使用react-navigation连接它们之前，让它们变得愚蠢是件好事。 创建一个名为navigation.js的新文件，并导入两个组件。
createStackNavigator是react-navigation 2+版中StackNavigator的替代产品。 注意，我们没有将标题传递到主屏幕。
使用Redux创建商店
下一步是建立一个Redux商店，该商店将使用动作，动作创建者和reducer来更改应用程序中的主题。 在actions.js放入以下代码。
我们只能执行一项操作，并更改应用程序的主题颜色。 现在减速器：
注意，我们将初始状态下的原色设置为十六进制值。 您还可以从应用程序中的配置文件或常量文件中检索它。 我们还将导出colors.js文件，该文件包含定义不同配色方案的三个不同的十六进制代码值。
最后，创建商店并将其创建到App.js ，以便应用程序组件使用它。
在App.js文件中，我们连接Redux存储以管理状态和导航。
您可能想知道为什么对如此小的应用程序使用Redux Store。 好吧，我只想演示一种实用的方法，以使用React Native和Redux来构建可访问的应用程序。 您可以选择管理状态。
完成应用程式
发生操作的React Native应用程序的最后一个组件是Home.js和Theme.js 。
通过按下设置图标，我们可以导航到主题屏幕以更改主屏幕的背景颜色。 我们还在这里传递主题屏幕的标题。
更改颜色的魔力发生在Home.js的这一行：
我们正在从道具中接收primaryColor 。 选择可行的选项后， Theme.js文件将更改此道具的值。 看看下面。
在上面， handleThemeChange处理我们在actions.js定义的唯一动作的分派。 最后，我们的应用程序开始运行了。
您可以在此Github存储库中找到完整的代码。????
深度/反应天数30天
⚛️+????通过在GitHub上创建一个帐户，为amandeepmittal / 30daysofReactNative开发做出贡献。 github.com
我叫阿曼·米塔尔 （ Aman Mittal） 。 我是一名开发人员，负责开发与Node.js相关的Web应用程序和❤️sReact Native。 这是我的网站和Twitter 。
如果您不熟悉如何在React Native中使用/集成Redux并想了解更多有关它的信息，则应查看以下文章。
如何通过React Native和Expo将Redux集成到您的应用程序中
Redux是React Native生态系统的重要组成部分。如果您的世界围绕着JavaScript旋转，那么您可能已经... medium.freecodecamp.org
要获得有关我的下一个React Native文章的通知，请使用此表单注册我的个人时事通讯。
From: https://hackernoon.com/simple-recipe-to-build-a-theme-app-in-react-native-8e2456f81bc5
以上是 在React Native中构建主题应用程序的简单食谱 的全部内容， 来源链接： utcz.com/z/383940.html
