相机不显示,状态转换问题,反应原生
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])}>
以上是关于相机不显示,状态转换问题,反应原生的主要内容,如果未能解决你的问题,请参考以下文章