天道酬勤,学无止境

react-native

React Native WebView is not loading the source

I was following the example in react-native docs and don't know why my webview won't load the website. Here is my code: /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, Image, TextInput, Button, TouchableHighlight, TouchableOpacity, StatusBarIOS, WebView } from 'react-native'; StatusBarIOS.setStyle(1); import Dimensions from 'Dimensions'; var width = Dimensions.get('window').width; var height = Dimensions.get('window').height; var CStyles = require('./CStyle'); class TestComp extends

2021-06-24 11:29:38    分类:问答    webview   react-native

如何将 Google 的 reCAPTCHA 集成到 React Native 应用程序中?(How to integrate Google's reCAPTCHA in a React Native app?)

问题 我没有找到任何 React Native 库来帮助 reCAPTCHA,我发现的唯一 Android 库是 Android-Lib-reCAPTCHA,但它使用旧 API(显示密码而不是复选框)。 我曾尝试使用 react-native-webview-bridge 显示 Javascript reCAPTCHA,但我无法使其工作,而且它非常缓慢且不稳定。 此外,当验证码不仅仅是一个复选框时,有时验证码需要更多空间来显示图片。 除了 WebView,您还知道其他方法吗? 我还检查了原生 Android 验证码系统,但它们都太旧/太复杂(密码)。 另外,机器人安装应用程序和订阅的频率是多少? 也许我不需要验证码,而只需要密钥/CSRF 令牌? 回答1 对于网络或移动网络应用程序,谷歌验证码有一堆反应包装器。 例如 github/react-grecaptcha 对我来说就像一个魅力。

2021-06-24 10:59:38    分类:技术分享    webview   react-native   captcha   recaptcha

使用 React-Native 在 Android 上监听传入链接(Listening for incoming links on Android with React-Native)

问题 我可以使用链接库使用 react-native 来监听和处理 IOS 上的传入链接:https://facebook.github.io/react-native/docs/linking.html,但它显示了添加事件监听器的功能对于 url 是特定于 IOS 平台的。 有没有其他方法可以在 android 上侦听我的应用程序的传入链接并在 Javascript 端处理它? 回答1 我刚开始工作! 您只需要按照这些说明进行操作。 基本上,在现有的android/app/src/main/AndroidManifest.xml下添加一个<intent-filter> ,其中包含VIEW操作、 DEFAULT和BROWSABLE类别,以及至少一个<data> 。 然后只需重建并重新安装您的 APK( react-native run-android ),就是这样! 与您的<data>标签匹配的链接现在将在您的应用中打开! 现在只需在您的主要 Javascript 类的componentDidMount()中使用 Linking.getInitialURL() 捕获此 URL! 清单示例: <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="net.yourapp"

2021-06-24 10:39:20    分类:技术分享    android   react-native   deep-linking

React Native 错误:元素类型无效:预期为字符串或类/函数,但得到:对象(React Native error: Element type is invalid: expected a string or a class/function but got: object)

问题 我收到此错误,并且在解决此问题时遇到了很多麻烦。 我在这里尝试做的是有 3 个不同的屏幕,并有一个导航到每个屏幕的标签栏。 这是我的索引: import React, { Component } from 'react'; import { AppRegistry, Navigator, StyleSheet, View, Text } from 'react-native'; import Nav from './app/components/Nav'; import Screen from './app/Screen'; import Tabs from 'react-native-tabs' import SwitchView from './SwitchView'; class Proj extends Component { constructor(props){ super(props); } render(){ var x = "FeedView"; return( <View style={styles.container}> <Tabs selected={x} style={{backgroundColor:'white'}} selectedStyle={{color:'red'}} onSelect={el=> {x = el.props.name}}

2021-06-24 10:27:19    分类:技术分享    javascript   android   reactjs   react-native

如何使用 Code Push CLI 更新“生产”部署?(How to update “Production” deployment using Code Push CLI?)

问题 我一直在向我的团队展示我使用Staging键的进度。 当我执行code-push deployment ls APP_NAME_HERE -k ,它会给我一个Staging和Production表,其中Production有消息No updates released 。 我一直在使用code-push release-react APP_NAME_HERE ios来更新。 任何人都可以指导我哪些选项需要发送到Production而不是Staging吗? 回答1 您可以使用 --deploymentName 指定要更新的部署。 code-push release-react APP_NAME_HERE ios --deploymentName Production 您还可以将您的版本从登台升级到生产(文档): code-push promote APP_NAME_HERE Staging Production

2021-06-24 10:24:27    分类:技术分享    react-native   code-push

react-native run-android 无法识别(react-native run-android is unrecognized)

问题 我已经在全球安装了 react-native-cli: npm install -g react-native-cli 然后运行: react-native init AwesomeProject cd AwesomeProject 我得到了以下结构: -- AwesomeProject ---- node_modules ------ react-native 当我运行react-native run-android 时出现错误: 命令run-android无法识别。 你的意思是在一个 react-native 项目中运行它吗? 当我运行 react-native start 时,我得到了相同的结果。 react-native -v 印刷: 反应原生cli:0.2.0 react-native: n/a - 不在 React Native 项目目录中 我做错了什么? 回答1 对我造成这种情况的原因是运行npm install --save [package]而实际上系统以前一直在使用yarn而不是npm 。 为了解决这个问题,我刚刚删除了node_modules文件夹并运行: yarn install然后react-native run-ios (或 android)工作正常。 (React Native 的副本:命令 `run-ios` 无法识别) 回答2

2021-06-24 10:22:28    分类:技术分享    android   node.js   react-native

如何在 react-native 地图视图上设置 legend.png 的样式(how to style legend.png on a react-native map view)

问题 我正在尝试为我在 react-native 项目中为 android 地图创建的图例设置样式。 我很难让它正确定位。 必须在图例容器中使用绝对属性让我失望。 样式 container: { flex: 1 }, map: { position: 'absolute', top: 56, left: 0, right: 0, bottom: 0, }, legendContainer: { position: 'absolute', left: 200, right: 0, bottom: 0, height: 65, width: 210, flex: 1, alignItems: 'center', flexDirection: 'column', justifyContent: 'center', backgroundColor: 'transparent' }, legend: { top: 0, right: 0, height: 60, width: 180, flexDirection: 'row', resizeMode: 'cover' } 地图.js <View style= { styles.container } > <Toolbar title={this.state.selectedTrip.tripName || this.state

2021-06-24 10:02:04    分类:技术分享    reactjs   react-native   flexbox

ReactNative:如何使文本居中?(ReactNative: how to center text?)

问题 如何在水平和垂直方向上将 ReactNative 中的文本居中? 我在 rnplay.org 中有一个示例应用程序,其中justifyContent="center"和alignItems="center"不起作用:https: //rnplay.org/apps/AoxNKQ 文本应居中。 为什么文本(黄色)和父容器之间的顶部有边距? 代码: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.topBox}> <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text> </View> <View style={styles.otherContainer}> </View> </View> ); } }); var styles = StyleSheet.create({ container

2021-06-24 09:59:35    分类:技术分享    reactjs   flexbox   react-native

使用 React Native 获取时区(Get the time zone with React Native)

问题 我想获取电话用户的时区,以便我可以将它添加或减去从我的 API 获得的 UTC 时间,然后对它们进行操作(例如,用于通知)。 我只找到了如何使用 DatePickerIOS 添加偏移量,但没有其他方法......是否可以从前面获取它? 回答1 几乎任何你可以在浏览器上用 JavaScript 做的事情(当然有例外),你可以在 React Native 中做。 我会启动一个新的日期对象并在其上调用getTimezoneOffset()以获取时区在本地偏移的分钟数。 var date = new Date(); var offsetInHours = date.getTimezoneOffset() / 60; 回答2 我发现最好获取实际的时区 ID(例如America/New_York ),然后在开始时将服务器程序设置为使用该时区。 为此,请使用 react-native-device-info 库:https://www.npmjs.com/package/react-native-device-info import DeviceInfo from 'react-native-device-info'; console.log(DeviceInfo.getTimezone()); // 'America/New_York' 如果您在编译期间收到有关“tvOS”的错误

2021-06-24 09:49:57    分类:技术分享    react-native

如何使用 React-Native 进行这种转换?(How to make this transform with React-Native?)

问题 我尝试使用 style.transform 属性,但我无法进行转换,没有那么多文档,哭... 这是css3代码: 变换:translateZ(-100px) translateX(-24%) translateY(0)rotateY(60deg); 回答1 这是一个非常接近的结果: render() { return ( <View style={styles.container}> <View style={styles.child} /> </View> ) }, var styles = StyleSheet.create({ container: { backgroundColor:'green', flex: 1, }, child: { flex: 1, backgroundColor: 'blue', transform: [ { perspective: 850 }, { translateX: - Dimensions.get('window').width * 0.24 }, { rotateY: '60deg'}, ], } }); 查看完整示例:https://rnplay.org/apps/Qg7Bhg

2021-06-24 09:41:44    分类:技术分享    react-native   transform