如何在React Native中直接在组件中调用函数

时间:2020-02-24 12:53:40

标签: react-native

我制作了一个具有功能 launchCamera()的CameraComponent.js。我在BottamTab导航中调用CameraComponent.js。通过调用 launchCamera(),我可以简单地启动相机按钮。但是我想在BottamTab导航中调用组件时直接启动相机,就像在whatsapp中将topTab向左移动一样。我试图在构造函数中调用函数,而不是ComponentWillMount(因为它在react native中被删除了)。但是没有任何作用。这是我的下面的代码

export default class CameraComponent extends React.Component {
    constructor(props) {
        super(props);
        launchCamera();
        this.state = {
            filePath: {},
        };
    }
        launchCamera = () => {
        let options = {
            storageOptions: {
                skipBackup: true,
                path: 'images',
            },
        };
            ImagePicker.launchCamera(options, response => {
            // console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else {
                let source = response;
                // You can also display the image using data:
                // let source = { uri: 'data:image/jpeg;base64,' + response.data };
                this.setState({
                    filePath: source,
                });
            }
        });
    };


    render() {
        return (
            <View style={styles.container}>
                    <TouchableOpacity onPress={this.launchCamera.bind(this)} >
                        <Text>Launch Camera</Text>
                    </TouchableOpacity>
            </View>
        );
    }
}

0 个答案:

没有答案