相机不显示,状态转换问题,反应原生

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了相机不显示,状态转换问题,反应原生相关的知识,希望对你有一定的参考价值。

我一直在尝试保存一个asyncstorage项目,在toupbleopacity onPress上,然后导航到一个react-native-camera屏幕。

问题是:相机屏幕变空白。我收到以下错误:警告:在现有状态转换期间无法更新(例如在'render'或其他组件的构造函数中)。渲染方法应该是道具和状态的纯函数;构造函数的副作用是反模式,但可以移动到'componentWillMount'。

警告指向第27,36和41行(在AddParameters类中)

这是代码:

AddParameters.js

import React, { Component } from 'react';

import {
  Text,
  AsyncStorage,
  View,
  TouchableOpacity,
} from 'react-native';

class AddParameters extends Component {
  constructor() {
    super()
    this.state = {
      localIds: [
        "data1",
        "data2",
        "data3",
        "data4",
        "data5",
        "data6"
      ],
    }
  }

  renderScreen = () => {
      return (
            <TouchableOpacity onPress={this._AddParameter(this.state.localIds[0])}>
              <Text>Click Me</Text>
            </TouchableOpacity>
      );
  }

  _AddParameter = (ParameterId) => {
    const { navigate } = this.props.navigation;
    AsyncStorage.setItem("myparam", ParameterId);
    navigate("CameraScreen");
  }

  render() {
    return (
      this.renderScreen()
    );
  }
}



export default AddParameters;

CameraScreen.js

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage,
} from 'react-native';
import Camera from 'react-native-camera';

class CameraScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
      mystate: '',
    };
  }

  renderCamera = () => {
    return (
      <Camera
        ref={(cam) => {
          this.camera = cam;
        }}
        style={stylesCamera.container}
        aspect={Camera.constants.Aspect.fill}>
      </Camera>
    );
  }

  render() {
    return (
      this.renderCamera()
    );
  }
}

const stylesCamera = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "transparent",
  },
});

export default CameraScreen;

任何解释都会有所帮助。提前致谢。

答案

在您的AddParameters文件上尝试更改此:

<TouchableOpacity onPress={this._AddParameter(this.state.localIds[0])}>

至:

<TouchableOpacity onPress={() => this._AddParameter(this.state.localIds[0])}>

以上是关于相机不显示,状态转换问题,反应原生的主要内容,如果未能解决你的问题,请参考以下文章

在录制视频时处理相机翻转而不停止它反应原生

在拍摄多张照片时反应原生路由器通量和反应原生相机问题

反应原生初始区域不随状态更新

隐藏反应原生 webview 底部状态栏

反应原生相机视图

Android:通过片段进行相机预览。从活动中确定