我希望我的变量“ dominant_color”用View-Shot中的屏幕截图进行更新。 我从网上尝试了一张随机图片,它起作用了。但是,当我尝试使用屏幕截图时却没有。 下一个问题是:如果我一直截图并更新dominat_color,我是否会因为性能低下而需要稍后的sleep功能?
我不明白为什么这不起作用。 有人可以帮我吗?
...
import ViewShot from "react-native-view-shot";
import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas';
import { colorsFromUrl } from 'react-native-dominant-color';
export default class Level_2 extends Component {
constructor() {
super();
this.state = {
drawcolor: [{color: '#ff0000'}, {color: '#00ff00'}],
dominant_color: '#ffffff',
imageUrl: 'https://source.unsplash.com/random/800x600',
}
}
componentDidMount () {
// Random pictures updates dominant color after 2 seconds
sleep(2000).then(() => {
colorsFromUrl(this.state.imageUrl, (err, colors) => {
if (!err) {
this.setState({dominant_color: colors.dominantColor})
}
})
})
// Screenshot picture should update dominant color after 4 seconds (not working)
sleep(4000).then(() => {
Alert.alert("Color should update now again")
this.refs.viewShot.capture().then(uri => {
colorsFromUrl(uri, (err, colors) => {
if (!err) {
this.setState({dominant_color: colors.dominantColor})
}
})
});
})
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
}
render() {
return (
<View style={styles.container}>
<Text>dominant Color: {this.state.dominant_color} </Text>
<ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 }}>
<View style={styles.paint}>
<RNSketchCanvas
containerStyle={{ flex: 1 }}
canvasStyle={{ flex: 1 }}
defaultStrokeWidth={15}
defaultStrokeIndex={0}
strokeColors={this.state.drawcolor}
/>
</View>
</ViewShot>
</View>
);
}
}
...