标签: react-native-android

在过去的几天里，我一直在我创建的应用程序中解决 FlatList 的性能问题。

FlatList 由静态标题和 x 行组成。在测量的情况下，有 62 行，每行都由 4 个组件组成 - 其中一个使用了 4 次，总计为 7 个行单元格。此列表的每个单元格都是 TouchableNativeFeedback 或 TouchableOpacity（出于测试目的，那些附加() => null到 onPress。在几个级别（列表容器、行、单个单元格）上使用了 shouldComponentUpdate，我认为渲染性能对于这种列表来说已经足够好了。

对于我使用的一致测量initialNumToRender={data.length}，因此整个列表一次呈现。列表是使用按钮呈现的，数据加载不是我测量的一部分 - 它被预加载到组件本地状态。

根据附加的 Chrome 性能配置文件 JS 线程需要 1.33 秒来呈现组件。我使用 CPU 减速 x6 来更准确地模拟 Android 设备。

然而，列表显示在设备上大约 15 秒的标记处，因此从按下按钮到列表显示的实际渲染需要超过 14 秒！

我想弄清楚的是 JS 渲染组件和实际显示在屏幕上的组件之间会发生什么，因为设备在那段时间没有响应。每个触摸事件都会被注册，但只有当列表最终出现在屏幕上时才会播放。

我已经附加了来自 chrome 开发工具的跟踪，使用 android systrace 工具获取的 systrace 和来自 android profiler 的屏幕（遗憾的是我找不到导出后者的选项）。

跟踪几乎同时运行 - 顺序是 systrace、android profiler、chrome dev tools。

我应该采取哪些步骤来帮助我了解应用程序冻结时发生的情况？

简单复现应用（src.js中的代码，第一次提交）

Chrome 性能配置文件

Systrace HTML

安卓分析器

我已经尝试了多个模块来播放来自 android 中的本机应用程序的 mov 视频。但没有一个奏效。任何的想法？

• react-native-video-player（错误无法播放此视频）
• react-native-media-player (java 错误)
• react-native-android-video-player (java 错误)
• react-native-video（不播放 mov）
• react-simple-video-player （不支持 react native） react-native-video-controls （不播放 mov）
• react-native-video-player（不播放 mov）

我尝试使用 react-native-firebase 模块在 React Native 上使用 firebase 存储，当你调用 firebase 存储时，我收到此错误：

您试图通过调用firebase.storage () 2IM.png使用未安装在您的 android 项目上的firebase 模块

我已经添加了所有必要的依赖项。

android/app/build.gradle

apply plugin: "com.android.application"
import com.android.build.OutputFile

project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.2"

    defaultConfig {
        applicationId "com.detecta.detecta"
        minSdkVersion 19
        targetSdkVersion 26
        versionCode 5
        versionName "1.1.6"
        vectorDrawables.useSupportLibrary = true
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE) …

根据此堆栈溢出解决方案，可以通过在每个Text组件中调用自定义字体来使用它。但是当我们Text的应用程序中有数千个组件时，我们可能会碰巧错过相同的字体系列。然后我们在字体系列的情况下失去一致性。

因此，有没有办法通过不调用每个Text组件来使用自定义字体系列？

我正在尝试在 react-native-video 中播放视频，但我只听到声音。我检查了文件是否有效（尝试了很少），所有回调都是在播放过程中触发的。为了缩小问题的范围，我做了以下示例：

<View style={{flex: 1, backgroundColor: 'grey', alignItems: 'stretch'}}>
  <View style={{backgroundColor: 'blue', flex: 1}}/>
  <Video
    style={{flex: 1}}
    source={{
      uri: 'path/to/the/file.mp4',
      type: 'mp4'
    }}
    resizeMode={"stretch"}
    rate={1.0}
    volume={1.0}
    muted={false}
    onProgress={console.log}
    onLoadStart={console.log}
    onLoad={console.log}
    onEnd={console.log}
    onError={console.log}
    onBuffer={console.log}/>
  <View style={{backgroundColor: 'green', flex: 1}}/>
</View>

以便预期视频被其他具有蓝色和绿色背景的视图包围，并且父视图的背景为灰色。

这是我看到的：

所以图片不显示。在真实设备上尝试了相同的结果。会是什么呢？

更新，更多研究：添加controls={true}使控件在点击灰色区域后出现。

我有一个图像文件夹，上面写着answers我在哪里存储图像问题的答案

该文件夹中目前有 200 张图像。

现在我想根据用户的答案显示答案的图像。

我随机生成答案

`var answer = getAnswers(data)` // some calculation for file name for answer

<Image source={require('../path/to/my/answer/' + answer + '.jpg')}

这样做我收到错误``需要expect exactly 1 string literal argument

我开始知道建造者需要在建造之前知道位置。但是如何解决此类问题。

我无法为 require initailly 映射 200 个文件

var one = require('../path/one.jpg')
var two = require('../path/two.jpg')

我该如何解决此类问题。有没有办法做到这一点？

需要帮助。

我正在尝试 react-native-camera，我总是得到

未定义不是一个对象（评估'_reactNativeCamer.RNCamera.Constants'

作为错误。

旧相机工作正常，只是新相机无法启动。

我只是复制粘贴了示例代码，但它似乎不起作用！它有什么问题？

import React, { Component } from 'react';
import {
  View,
  Text,
  Dimensions,
  StyleSheet,
  TouchableOpacity
} from 'react-native';
import { RNCamera } from 'react-native-camera';

class Camera extends Component {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          type={RNCamera.Constants.Type.back}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={'We need your permission to use your camera phone'}
        />
        <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
          <TouchableOpacity
              onPress={this.takePicture.bind(this)}
              style={styles.capture}
          >
            <Text style={{ fontSize: 14 …

我已经完成了从 aws cognito 获取用户的工作，我如何正确地做到这一点，即使在 React Native 应用程序关闭时也能保持用户登录状态

  state = {
    isAuthenticated: false
  }

  authenticate(isAuthenticated) {
    this.setState({ isAuthenticated })
  }
  render() {
    if (this.state.isAuthenticated) {
      console.log('Auth: ', Auth)
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Hello {Auth.user.username}!</Text>
        </View>
      )
    }
    return (
      <View style={styles.container}>
        <Tabs
          screenProps={{
            authenticate: this.authenticate.bind(this)
          }}
        />
      </View>
    );
  }
}

我构建了一个名为“CircleLoader”的自定义组件，它在可见时播放 Lottie 动画。它用作加载动画。在 iOS 上一切正常，但在 Android 上，动画会闪烁。模拟器和真实设备上的屏幕介于黑色和动画本身之间。有没有人遇到过这个问题？根本没有显示任何错误。

这是我的组件代码，如果它有用的话。

 import React from 'react';
 import { Button, StyleSheet, View } from 'react-native';
 import { DangerZone } from 'expo';
 import { dimensions, colors } from '../Utils/BaseStyles';
 import FadeInView from 'react-native-fade-in-view';
 const { Lottie } = DangerZone;
 import * as Animatable from 'react-native-animatable'

 export default class CircleLoader extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
       animation: require('./../../assets/custom_load.json'),
       visible: this.props.visible ? this.props.visible : false,
     };
   };

   componentDidMount() {
     this._playAnimation();
   }

render() {
    const circle_loader …

我正在使用andpor/react-native-sqlite-storage在 React Native 中管理 SQLite 数据库。现在我想将我的所有数据库备份到一个加密文件中，然后在以后恢复它。我知道如何在 android 中做到这一点，但不知道如何在 react native 中实现这一点。

如果它在android中，下面的代码可以帮助我在不加密的情况下备份数据库。

 final String inFileName = "/data/data/<your.app.package>/databases/foo.db";
File dbFile = new File(inFileName);
FileInputStream fis = new FileInputStream(dbFile);

String outFileName = Environment.getExternalStorageDirectory()+"/database_copy.db";

// Open the empty db as the output stream
OutputStream output = new FileOutputStream(outFileName);

// Transfer bytes from the inputfile to the outputfile
byte[] buffer = new byte[1024];
int length;
while ((length = fis.read(buffer))>0){
    output.write(buffer, 0, length);
}

// Close the streams
output.flush();
output.close();
fis.close();

所以我的问题是如何在 React …