Tag: react native

Dropanon: 为什么我构建一个React Native App Dropanon出生于我寻找解决两个目标的方法时：在React Native中从头开始构建一个应用程序通过Apple App Store提交过程获取应用该产品本身是出于我对在线匿名性的个人爱好而诞生的，而我的联合创始人则非常讨厌别人发表Yelp评论来建立自己的在线品牌。什么是Dropanon？ Dropanon是一个基于位置的匿名消息传递应用程序，当前可在iOS应用商店（Android即将推出）上使用。用户可以将单词，表情符号或链接放在他们的位置。每个液滴的半径为75米，只能在该半径范围内读取。认为它像涂鸦。液滴在地图视图上可视化，并在提要/列表视图中读取。该地图将仅可视化距用户最多500米的跌落。施加此限制是为了限制客户端需要发出的请求的数量，并鼓励用户四处走走和探索。每滴都是匿名的。存储的唯一标识符是RFC4122 v1唯一用户ID（使用React Native UUID1）。此UUID仅用于允许用户标记或阻止其他用户（这是App Store的要求）。当前，液滴将永远存在并按时间顺序显示给用户。我们已经收到的一些反馈是使滴剂暂时消失-在一定时间，数分钟或数天后使它们消失。这是我们将来可能会做的事情，但就目前而言，您的贡献将继续存在。怎么样 Dropanon使用React Native和Reflux构建。持久性由Firebase处理（对于地理查询，则由GeoFire处理）。从启动开始的基本应用程序流程如下：初始化应用程序和加载视图。这在顶级React组件App.js中处理。在componentDidMount() ，这里发生了很多事情，例如检查用户是否已入职或是否已授予正确的权限（在使用应用程序时的位置）。所有的Reflux商店也在此处初始化，并附加了侦听器。如果缺少权限，用户尚未注册或发生其他问题，我们将适当处理。由App.js初始化的Reflux商店开始处理各自的任务。这些在逻辑上分为： ErrorStore ， FirebaseStore ， GeoStore和TimerStore 。 ErrorStore.js ErrorStore负责错误。任何捕获到的错误都将传递给它，然后传递回App.js ，然后在顶部显示一个错误栏，告诉用户出了什么问题。可以通过点击横幅关闭横幅。 FirebaseStore.js 所有滴都保存到Firebase的实时数据库之一并从其中读取。 Firebase允许我们省去编写自己的后端的工作，很快我们就可以运行并运行原型。 […]

24小时内的应用程序：我的React Native体验: 对于最终版，我删去了一些功能，而略过了其他功能，例如菜单栏，上/下投票动画以及最重要的是语音搜索。这是一个有趣的小项目，I̶̶a̶m̶̶c̶u̶r̶r̶e̶n̶t̶l̶y̶̶d̶e̶b̶a̶t̶i̶n̶g̶̶o̶n̶̶w̶e̶t̶h̶e̶r̶̶t̶o̶̶o̶p̶e̶nlisht̶i̶n̶t̶l̶y̶n̶-̶ React Native是一个很棒的JS框架，用于构建应用程序，我已经利用该框架构建跨平台应用程序的功能开发了我的第一个功能齐全的android应用程序。 RN非常适合真正的基本应用程序，这些应用程序在应用程序商店中占很大比例。对于游戏或其他广泛交互和自定义应用程序等其他热门游戏，坚持使用Swift / Objective-c或Java等本地语言将是您的最佳选择。我肯定会越来越多地使用RN，看看在2017年将带给我什么。 ✌🏾 该项目现已在Github上开源 Apple拒绝了Urban Dictionary应用程序，因为它与现有应用程序过于相似。 🤷🏽‍

我在React-Native和iOS之间集成的经验: 好吧，这是我第一次使用React Native，但不仅是第一次与本地iOS应用程序集成。项目配置通常，我从Facebook官方文档开始：与现有应用程序集成·React Native 从头开始新的移动应用程序时，React Native很棒。但是，它对于添加… facebook.github.io 也很好。必备的先决条件是已安装npm ，即JavaScript的软件包管理器。一切都非常简单： https://nodejs.org/en/download/ 最后我执行： $ npm -v 我看到我已经安装了版本5.6.0 除此之外，建议安装： CocoaPods ，用于Objective-C，Swift和在Objective-C运行时上运行的任何其他语言的依赖项管理器。为了便于安装，我使用Homebrew （macOS缺少的软件包管理器）进行安装： $ brew安装cocoapods 好的，您可以开始设置项目了。在iOS项目中，我创建了一个“ js ”文件夹，其中包含React-Native项目。首先，在此文件夹中，创建具有以下结构的文件“ package.json ”。请注意，我的应用程序称为“ StoryReact” 该应用无法生成，“ Yoga-internal.h”文件似乎存在错误。经过一些在线研究之后，我决定在GitHub上创建一个问题，但是我得到了负面的反馈，我将不得不手动更改框架的代码。但是我不喜欢它作为解决方案，因此我尝试切换到另一个版本。然后我删除： “豆荚” “ Podfile.lock” “ js / node_modules” 在阅读到从0.54到最新版本的版本都给出了相同的问题之后，我回到终端并安装了React-Native的版本0.51.0 。因此，我将执行与之前相同的命令，以使用pod在项目上安装react-native和依赖项，相反，包括对Podfile的更改： $ yarn add […]

嘿，谢谢您的教程，因此我们也可以像您一样优化构建过程，但并非如此……: 嘿，谢谢您的教程，因此我们也可以像您一样优化构建过程，但不适用于我。如果您看看我在做什么错，我将不胜感激：我使用en1而不是en0的原因是因为我在Wifi网络而不是以太网上进行测试。这是错误：确保以下各项： –节点服务器正在运行并且在同一网络上可用—从react-native根目录运行“ npm start” 在AppDelegate中正确设置了节点服务器URL 我可以看到该IP地址与“设置”->“网络”中显示的IP地址相同。手机和计算机也使用相同的wifi网络。先感谢您。

向通知添加声音: 您是否曾经从ESPN应用程序收到过推送通知，它会以ESPN的“ da-na-na，da-na-na”声音显示最终得分？您是否曾经考虑过上述通知，并认为我希望可以为自己的应用程序做到这一点？不再思考。病态向您展示如何使用自定义声音发出通知。第一步-使用iTunes转换为.m4r 如果您有 mp3 或 wav 文件，则可以跳过第一步。您需要做什么：将歌曲添加到iTunes>转换为AAC>在finder中查找>将文件扩展名从.m4a重命名为.m4r .AAC是我们想要的。这是有关如何在iTunes中将文件转换为AAC的更多信息https://support.apple.com/zh-cn/HT204310 第一步（替代方法）-使用Garageband转换为.m4r 在Garageband中打开文件。编辑所需的确切声音。 Apple要求所有通知声音必须在30秒以内。然后单击共享>将歌曲下载到iTunes… 在iTunes文件中>在Finder中显示。然后将.m4a重命名为.m4r，单击“确定”。将文件拖到桌面进行下一步。第二步-将声音转换为CAF 我们需要将.m4r转换为.caf文件。有趣的事实.caff代表核心音频文件格式。输入此afconvert命令，该命令已存在于终端中 afconvert -d LEI16 -f caff LEI16 @ 44100 -c 1 input_file.xxx output_file.caf 因此，例如，如果我有文件“ ANewRecord.m4r”（没有空格），则输入以下命令： afconvert -f caff -d LEI16 @ 44100 -c 1 ANewRecord.m4r newRecordm4r.caf 第三步-拖放将新的.caf文件放入项目的Supporting Files文件夹中。确保将您的应用选择为目标。 […]

UI指南特定标题（包括iOS大标题），带有react-native（动画）: 在iOS 11发行版中，Apple引入了大标题，并将规范添加到了设计准则（https://developer.apple.com/ios/human-interface-guidelines/bars/navigation-bars/）中。在第一次大喊大叫之后，这些标题已被广泛接受，并在iOS上越来越多的应用程序中使用。现在该看看如何以本机方式实现它们。我们将创建一个“ ViewWithTitle”组件，它将作为您可以放置标题和子组件的容器。然后，ViewWithTitle用iOS上的大标题和Android上的标准标题呈现页面。当用户滚动时，它还会为标题添加动画效果。由于我确实讨厌没有详细示例的博客文章，因此您可以在Github（https://github.com/alexkuttig/react-native-view-with-title）上查看此文章的代码，也可以通过npm（npm）获取组件。我反应本机视图与标题）。返回执行。关于标题，有两个棘手的部分。我们希望它们在任何设备上都具有正确的尺寸，并在两个平台上均符合规范。当用户在iOS上向下滚动时，大标题应设置动画并更改为标准标题。第一部分并不难。主要是关于阅读UI指南并编写不同的案例……为此我写了一个小帮手：它返回给我iPhoneX的StatusBar，Header和底部填充值的高度，以及我的SafeArea的vh和vw值。使用此值，我可以在ViewWithTitle组件中工作。接下来，我们需要定义组件的结构。我们需要一个用于标题的区域，以及一个用于内容的容器。您可以看到我们有一个外部容器，其中所有内容将包含所有内容；一个标题容器，其中将放置标题；一个内部容器，其中将放置我们的内容。我们正在使用DimensionsHelper来获取容器的高度。缺少的渲染功能将在下一步中创建。 renderTitle 0.1：首先，我们必须再次进行一些基于样式表的工作。根据不同的UI准则，我们为iOS和Android标题编写样式。没有动画，没有iOS大标题。我们确实首先需要另一件事： renderContentArea：结构非常简单。我们使用ScrollView并将全角视图放入ScrollView内，然后在其中放置内容。但是为了给我们的标题添加动画效果，我们需要知道ScrollView何时滚动。因此，我们添加了onScroll函数并将滚动值绑定到我们的state.scrollY。这很重要，因为在下一步中，我们将使用此值为标题添加动画效果！ renderTitle 1.0：由于我们只想在iOS上显示标准标题，因此当用户滚动视图时，我们必须通过Animated API做一些动画魔术。目前，我们仅查看renderTitle函数的iOS部分，因为这里不需要Android上的任何动画。我们使用state.scrollY，其中包含ScrollView的滚动值，并对其进行插值以获得不透明度和边框颜色。需要更改边框颜色，因为标题始终停留在我们接下来将要创建的大标题的顶部（zIndex）。请注意，我们使用外推：’clamp’防止内插函数外推值。 renderIOSBigTitle：到目前为止，我们只有一个iOS标题，该标题一直隐藏到用户滚动为止。现在，我们将通过添加具有绝对位置的容器来更改此设置。此容器位于标题容器的下方（yIndex）和内容容器的顶部（zIndex）。我们还添加了两个插值。一种用于字体大小，当用户“过度滚动”视图时，我们希望将其增大。第二个插值用于将大标题的容器（yIndex）向上移动，以便在用户向下滚动时将其滑动到标准标题容器的（zIndex）以下。我们还必须在这里添加一些样式。最后，我们只需要在这里和那里添加一些填充（内容容器），以及： TADA！大功告成这是完整的代码，包括使用可选FlatList用法（而不是ScrollView）的实现（只需为组件提供数据数组和renderItem函数），以及基于空间和字体大小的不同标题的一些长度限制。 […]

iOS Mobile与React Native，Yarn，GreenhouseCI，CodePush和HockeyApp的持续集成: 自从问世以来不到两年，但是React Native已经扰乱了移动开发。 React Native采用了卓越的开发经验，轻松的启动时间，“一次学习，随处编写”的精神以及热情的社区，因此赢得了本机和Web开发人员的一致好评。随着React Native社区的不断发展和成熟，软件工程最佳实践开始显现。任何平台开发的一项重要最佳实践是持续集成的概念。一段时间以来，出于自动化的原因，自动化的构建和部署一直是Web开发社区的主要内容：效率低下，手动且易于出错的构建和部署在现代开发中不应该成为现实。相同的信念已经进入移动开发，现在有大量支持自动化构建和部署的工具。在本文中，我们将利用一套流行的工具（GreenhouseCI，CodePush和HockeyApp）以及React Native应用程序来实现强大的移动CI系统。重要说明： GreenhouseCI不“正式”支持React Native，但其构建系统具有促进React Native应用程序CI的所有先决条件。这就是下面的说明如此涉及的部分原因。可以在此链接上找到此博客文章的示例应用程序。假设条件本博客文章假定以下内容：您具有React Native开发的工作知识，包括NPM的工作知识您已经为iOS应用设置了证书和配置文件您正在使用Yarn管理您的React Native依赖项关于版本的注意事项此博客文章的编写具有以下版本：节点：6.9.0（LTS） React Native：0.36 纱：0.15.1 贸易工具在开始之前，需要注意这些工具的含义以及它们对于有效的移动CI系统的重要性。 GreenhouseCI ： “ CI即服务”平台，可轻松配置适用于本机和混合应用程序的移动CI Yarn ：Facebook创建的程序包管理器，允许进行快速，确定性的依赖项管理 CodePush ：由Microsoft构建的库和基础结构，可通过无线（OTA）更新基于JavaScript的混合平台 HockeyApp ：Microsoft的一项服务，允许将应用程序Beta有效地分发给测试人员和谐地使用所有这些工具，使移动开发人员可以将更多的精力放在他们产品的质量上，而手动准备好要测试和部署的应用程序效率低下。我们的目标到本文结尾，我们将完成以下工作：为我们的iOS React Native应用程序设置CodePush项目在我们的iOS React Native应用程序中集成了CodePush 为我们的iOS React Native应用设置一个HockeyApp 为我们的iOS […]

iOS gitNoteTaker React Native示例笔记: 介绍该项目来自eggheadIO的react native教程。它类似于reactJS教程，但是firebase访问部分略有不同。本教程使用传统的REST提取方法，而不是为Web开发人员使用Firebase建议的方法。从我的角度来看，React native似乎比reactJS容易一点。我在iPhone和模拟器上都测试了该应用程序，它们工作正常。跑这是您可以运行和测试应用程序的方法。使用XCode打开ios文件夹中的.xcodeproj文件，然后运行该应用程序。该应用程序将在模拟器上启动。您还可以在Chrome浏览器中启动调试器。模拟器上的Cmd + D显示菜单，您可以选择使用远程调试器，即Chrome浏览器调试器。模拟器上的Cmd + R将为您重新加载应用程序。当您对代码进行一些更改时，这是一个很好的功能。这是完整功能测试的链接。注意我从与Firebase的接口中注意到的一件事是，获取方法由于不是官方推荐的方法，因此将为笔记项的索引号创建随机字符串，而不仅仅是按顺序创建数字。我必须更改info.plist文件中AppTransport安全设置下的允许任意加载，以便iOS进行提取方法链接。当我将应用程序上传到手机上时，我意识到键盘将覆盖输入框，因此我进行了一些研究，并决定使用键盘垫片来解决问题（此处是链接）。信息我使用开发者帐户将应用程序上传到我的iPhone（单击此处了解更多说明）。感谢王浩宇（Apple）开发人员帐户。如果您想知道如何启动React Native iOS应用，可以转到react native入门页面。其中涉及一些ES6语法。使用了很多箭头功能。箭头函数的一个好处是语法，因此我们不需要在回调函数中使用bind（this）（除非它必须在组件属性分配中使用）。有关arrow的更多信息，请参考本文。

立即响应Native和Apple TV: 我总是检查React Native中每个发行版的注释。前几天，我对v0.36.0-rc.0中一个有趣功能的宣布感到惊讶：对Apple TV的支持。我从查看提交（由dlowder-salesforce所做）开始，我发现UIExplorer示例项目已经对此提供支持，但是由于状态栏存在问题而无法正常工作，我认为这是因为没有t状态栏。在分析了对项目所做的更改并阅读了github报告的有关该主题的票证之后，我找到了启用Apple TV的必要步骤。好的，现在不用多说，这里是将Apple TV支持添加到新的React Native项目的步骤。我将在步骤中尽可能详细：创建一个新项目 react-native初始化apple_tv_example 使用package.json中的候选发布者用以下命令替换本机版本（在我的情况下为^ 0.35.0）： git：//github.com/facebook/react-native.git#v0.36.0-rc.0 注意：由于它将是版本的一部分，因此将来将是可选的。通过运行安装对软件包所做的更改我注意：您会收到一个 UNMET PEER DEPENDENCY 错误-没关系。要验证软件包是否已正确安装，请在 node_modules / react-native 下的文件中查找对 TARGET_OS_TV的引用，应该有很多。通过在xCode上转到“文件>新建>目标”，然后选择“ tvOS>应用程序>单视图应用程序”，将tvOS应用程序添加到项目中。通过在Linked Frameworks and Libraries中按“ +”将所有tvOS库链接到新目标。在工作区中，搜索包含“ tvOS”的所有库，然后添加它们。通过添加来添加对ObjC和LC ++的支持 $（继承）-ObjC -lc ++ 到“构建设置”下的“其他链接器标志”。删除为新目标创建的文件夹内的所有文件和文件夹，但保留Info.plist。通过删除Main storyboard文件的基本名称（假设我们不会使用任何Storyboard）并添加App Transport […]

反应NativeでiPadの画面分割に対応させる方法: React Nativeでこれをやるには少々问题があって， Dimensionsがうまくウインドウのサイズを返してくれない。“ Split View”でも“ Slide Over”でも常に同じ値を返す： console.log(Dimensions.get(‘screen’)) // {fontScale: 1, width: 768, height: 1024, scale: 2} console.log(Dimensions.get(‘window’)) // {fontScale: 1, width: 768, height: 1024, scale: 2} それは，最も外侧にViewを一枚敷いて， flex: 1をスタイルに设定して， onLayoutにイベントハンドラを设定を，そのビューのサイズを取得することだ。そしてそのサイズuxReduxのストアなりReactのContextなりに保存しておく。适应性布局提供商/消费者分いわゆるProvider-Consumerパターンの形を取る。サイズデータはReactのContext APIは使わずReduxのストアに格纳する。提供者 // @flow // adaptable-layout-provider.js import * as React from ‘react’ import { View, StyleSheet } from ‘react-native’ import { compose, […]