react-native - 如何在世博相机中使用构造函数?
问题描述
我想在我的世博相机中使用构造函数,但构造函数在函数中不起作用。也许有想法如何在相机中使用构造函数?
只需要在我的相机上进行构造工作,也许还有其他想法?
将此代码放入相机,例如:
constructor(props) {
super(props);
this.state = {
reptile: 'alligator',
color: '#008f68',
};
}
相机代码:
import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
<Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
解决方案
您可以为功能组件编写自己的自定义钩子
使用ConstructorHook
function useConstructor(callBack = () => {}) {
const [hasBeenCalled, setHasBeenCalled] = useState(false);
if (hasBeenCalled) return;
callBack();
setHasBeenCalled(true);
}
将其包含在您的应用中并像这样使用
import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
function useConstructor(callBack = () => {}) {
const [hasBeenCalled, setHasBeenCalled] = useState(false);
if (hasBeenCalled) return;
callBack();
setHasBeenCalled(true);
}
export default function App() {
useConstructor(() => {
console.log(
"This only happens ONCE and it happens BEFORE the initial render."
);
});
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
<Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}> Flip </Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
推荐阅读
- c# - 身份框架 GenerateUserToken 验证问题
- javascript - 推送向量中的唯一元素 (indexOf())
- php - 检查一个数组的所有项目是否在另一个关联数组中可用?
- visual-studio-code - Visual Studio 代码美化格式问题
- android - 如何在 DatePickerDialog 中将当前日期设置为 MinDate
- css - 避免某些相邻元素和类之间的 CSS 样式
- jsf-2 - javax.el.PropertyNotFoundException:目标不可达,标识符“XXX”解析为空
- javascript - javascript检查html输入类型编号不为非数值的空
- android - 未解决对 DaggerApplicationComponent 的引用
- javascript - 将 Polymer 1.0 项目升级到 Polymer 3.0 的最佳方法