天道酬勤,学无止境

react-native-android

如何从本机应用程序中的 URL 查看和共享 pdf?(How to view and share a pdf from an URL in a react native app?)

问题 我的 React Native 应用程序中有一个用例,其中我必须从端点加载和显示 pdf,并使用本机共享选项(两个 ios和安卓)。 我目前正在使用react-native-pdf库在应用程序上加载和显示 pdf 并且它工作正常。 问题在于共享选项。 我尝试使用 facebook 的 Share API 来实现这一点,但不幸的是,它不符合我的目的,因为 pdf 文件作为链接共享,在 Android 中,我必须将message and pdfUrl传递相同的值(至少要获得相同的值)结果跨平台)。 我希望在单击任何共享选项时将 pdf 文件作为附件共享。 下面是我的代码: class ViewPdfScreen extends Component<Props, {}> { render() { const pdfUrl = 'http://samples.leanpub.com/thereactnativebook-sample.pdf' const source = { uri: pdfUrl, cache: true, expiration: 900, // cache file expired seconds (0 is not expired) }; return ( <View style={styles.container}> <View style={styles

2021-10-25 23:56:28    分类:技术分享    react-native   pdf   react-native-android   share   react-native-ios

ReactNative - Android 在可能的图像视图中非常慢(ReactNative - Android extremely slow within may image views)

问题 我正在实现一个有很多图像视图的主屏幕。 这个概念就像 Photoshop 图层。 每层都是一个图像视图 (PNG)。 屏幕包含 20-30 个图像。 资产存储在本地。 该应用程序在 iOS 上运行流畅,但在 Android 上运行速度极慢。 我的第一个解决方案是减小文件大小,但没有多大帮助。 感谢您提供的任何帮助! react-native 版本是 0.59.10。 回答1 可以采取一些措施来提高应用程序性能。 1. 缩小图片尺寸 使用较小尺寸的图像,如缩略图。 使用 PNG 而不是 JPG。 将您的图像转换为 WebP 格式。 2.本地缓存图片 由于您是从本地加载图像,因此您无需关注这一点。 3. 使用 PureComponent 避免不必要的渲染 如果您使用 FlatList 来渲染图像, 4. 在你的 FlatList 上添加 initialNumToRender 道具 这定义了第一次渲染的项目数量。 5. 在你的 Item 组件上定义 key( keyExtractor ) prop 这将避免重新渲染动态添加或删除的项目。 6. 使用getItemLayout跳过动态内容的测量。 此外,还有一些名为maxToRenderPerBatch windowSize ,您可以使用windowSize来提高应用程序的性能。 查看 React Native Flatlist &

2021-10-25 23:01:40    分类:技术分享    react-native   react-native-android

如何在 Ios/Android 中使用 ReactNative 将直播视频广播到 YouTube 频道?(How to broadcast a live video to YouTube channel using ReactNative in Ios/Android?)

问题 是否可以在 Ios/Android 中使用 ReactNative 将实时视频广播到 YouTube 频道? 回答1 尝试使用这个库 https://www.npmjs.com/package/react-native-nodemediaclient https://github.com/NodeMedia/react-native-nodemediaclient import { NodeCameraView } from 'react-native-nodemediaclient'; ...... <NodeCameraView style={{ height: 400 }} ref={(vb) => { this.vb = vb }} outputUrl = {"rtmp://192.168.0.10/live/stream"}// out put to youTube camera={{ cameraId: 1, cameraFrontMirror: true }} audio={{ bitrate: 32000, profile: 1, samplerate: 44100 }} video={{ preset: 12, bitrate: 400000, profile: 1, fps: 15, videoFrontMirror: false }}

2021-10-25 17:46:12    分类:技术分享    react-native   react-native-android   react-native-ios   react-native-firebase   youtube-livestreaming-api

POST 请求与 Postman 一起使用但无法获取?(POST Request works with Postman but fails in fetch?)

问题 我创建了后端,它将接受对以下网址的请求 http://10.1.0.1/cgi-bin/api/write_config 使用 Postman 我得到了适当的响应,但是当我用 fetch 尝试同样的事情时,我得到了一个网络错误 这是我的代码: fetch ('http://10.1.0.1/cgi-bin/api/write_config', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ param1: 'attr1', param2: 'attr2', param3: 'attr3', }), }) .then(response => { console.log(response.json()) return response.json() }) .then(data => { console.log(data) }) .catch(e => { console.log('In catch block') console.log(e) }) 这些是我从响应中得到的标题(在 Postman 中): 内容类型:应用程序/json 访问控制允许来源:* 我收到以下错误(在 Javascript 中): { [TypeError: Network

2021-10-25 16:35:44    分类:技术分享    javascript   react-native   networking   postman   react-native-android

问题:如何设计一个适用于 react-native 中所有设备的标头(Question: How can I design a header which is applicable for all devices in react-native)

问题 我需要设计一个像下面附加的图像一样的标题。 我可以使用 react-native 元素或 material-ui 来设计它吗? 这里的配置文件名称可以是最长的名称或短名称。 但需要工作并从那个地方开始。 谁能提出一个好的解决方案? 注意:我使用了 react-native-element (Header) 但它没有按预期对我有用 回答1 您可以使用 React 导航设计完全自定义的 Header。 通过在navigationOptions设置标题高度 import React from 'react'; import { createStackNavigator } from 'react-navigation-stack'; import { View, TouchableOpacity, Text, Image } from 'react-native'; import { Icon } from 'react-native-elements'; const commonHeader = (navigation) => ({ headerLeft: null, headerRight: null, headerStyle: { backgroundColor: '#4DBCD7', height: 180, }, headerTitle: ( <View style={{

2021-10-25 14:21:47    分类:技术分享    react-native   header   material-ui   react-native-android   react-native-ios

React Native Android - 如何在 StackNavigator 中禁用 android 后退按钮(React Native Android - how to disable android back button in StackNavigator)

问题 我正在尝试实现锁定屏幕。 只有密码正确才返回画面,否则不得退出画面。 但是,如果您在 Android 上按“返回”按钮,它将始终返回。 我尝试使用BackHandler但它失败了。 它似乎与StackNavigator有关。 当 backButton 被按下时,我怎么什么都不做? import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import PINCode from '@haskkor/react-native-pincode'; import { BackHandler } from 'react-native'; import { View, Text, Button, } from 'native-base'; import { NavigationEvents } from 'react-navigation'; import Colors from '../common/Colors'; class LockScreenContainer extends PureComponent { static navigationOptions = () => ({

2021-10-25 12:18:48    分类:技术分享    react-native   react-native-android

使用 ReactNative 构建的 APK 无法替换为使用 Android Studio 构建的 APK(APK build with ReactNative Can't be Replaced with APK build with Android Studio)

问题 我在 Playstore 中发布了一个使用 React-Native 构建的 apk。 现在,我想使用 Android Studio 构建相同的项目。 包名和app id是一样的,keystore也是一样的。 但是,每当我尝试在旧的 apk(使用 React-Native 构建)上安装更新的 apk(使用 Android Studio 构建)时,它都会说未安装 apk。 有没有人遇到同样的问题? 或者,有人可以帮助我吗? 非常感谢。 回答1 如果包是相同的,那么这只是因为构建类型的不同而发生。 要么您是通过签名的 apk 安装调试 apk,反之亦然。 回答2 它是固定的。 当我构建最终签名的 apk 并将其上传到 Playstore 时,它​​毫无问题地替换了旧的 apk。 谢谢大家的帮助。 :)

2021-10-25 08:53:37    分类:技术分享    android   react-native   android-studio   react-native-android

React Native android 应用程序在应用程序商店上传时引发网络错误(React Native android app throws Network Error when upload on App store)

问题 我正在开发一个用于在全国范围内获取招标数据的应用程序。 我正在使用 axio 发布和获取数据,一切正常。 我已经生成了 Apk 并在模拟器和 Bluestaks 上对其进行了测试,但是当我昨天发布该应用程序时,该应用程序开始在登录页面上引发网络错误。 这是我第一次遇到错误,现在我被严重卡住了。 请有人帮助我 我的 package.json 文件是依赖项 "dependencies": { "axios": "^0.19.0", "firebase": "^5.11.1", "native-base": "^2.12.1", "react": "16.8.6", "react-native": "0.60.3", "react-native-elements": "^0.19.1", "react-native-image-picker": "^1.0.1", "react-native-router-flux": "^4.0.6", "react-native-vector-icons": "^6.6.0", "react-redux": "^5.1.0", "redux": "^4.0.1" }, 节点版本为 10.16.0 react-native-cli: 2.0.1 我的登录页面代码在这里 sendApicall(username,me) { debugger

2021-10-25 07:49:46    分类:技术分享    react-native   axios   react-native-android

运行 react-native run-android 时出错(Error while running react-native run-android)

问题 https://facebook.github.io/react-native/docs/getting-started.html 我已按照此链接上的说明进行操作。 但是应用程序没有在模拟器上启动 然后我按照删除 node_modules 文件夹的说明进行操作 - rm -rf node_modules && npm install 重置打包缓存 - rm -fr $TMPDIR/react-* 或 node_modules/react-native/packager/packager.sh --reset-cache 清除守望者手表 - watchman watch-del-all 从头重新创建项目 并再次创建全新的项目,但每次出现此错误时 我有 npm 4.6.1 节点 v8.11.4 jdk 版本 8 { "name": "p3", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "react": "16.4.1", "react-native": "0.56.0" }, "devDependencies": {

2021-10-25 06:26:19    分类:技术分享    react-native   react-native-android

React Native - 在 FlatList 之外触发 FlatList 的滚动(React Native - trigger scrolling of FlatList outside the FlatList)

问题 我有一个垂直FlatList分量和两个按钮为TouchableOpacity ,如何进行滚动的FlatList与按钮, 即“将 FlatList 滚动到底部”和“将 FlatList 滚动到顶部”? 最小示例: <View> <FlatList/> <TouchableOpacity> <Text>Scroll towards Top</>Text </TouchableOpacity> <TouchableOpacity> <Text>Scroll towards Bottom</>Text </TouchableOpacity> </View> 回答1 这并不难完成, <Flatlist/>组件已经有方法可以做到这一点。 scrollToEnd():滚动到内容的末尾。 scrollToIndex():滚动到指定索引处的项目,例如顶部的0 。 我为你创建了一个简单的演示:https://snack.expo.io/@abranhe/flatlist-scroll 我创建了一个自定义的<Button/>和<Card/>组件。 我正在用这种格式创建一个包含一些随机数据的数组 const data = [ { message: 'Random Message' }, { message: 'Random Message' } ] 我通过添加添加对<Flatlist/>的引用

2021-10-25 04:18:24    分类:技术分享    react-native   react-native-android   react-native-ios