为什么优势色不能与View-shot一起使用?

时间:2019-05-25 11:07:44

标签: react-native screenshot

我希望我的变量“ 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>
                );
            }
        }
     ...

0 个答案:

没有答案