通过调用静态方法来显示react组件

时间:2019-06-18 11:56:28

标签: javascript reactjs react-native

我想用本机库中的actionsheet和toast之类的调用方法显示react组件。 native-base通过调用if motion.isDeviceMotionAvailable { print("Motion available") print(motion.isGyroAvailable ? "Gyro available" : "Gyro NOT available") print(motion.isAccelerometerAvailable ? "Accel available" : "Accel NOT available") print(motion.isMagnetometerAvailable ? "Mag available" : "Mag NOT available") motion.deviceMotionUpdateInterval = 1.0 / 60.0 motion.showsDeviceMovementDisplay = true motion.startDeviceMotionUpdates(using: .xArbitraryZVertical) // ******* // Configure a timer to fetch the motion data. self.timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in if let data = self.motion.deviceMotion { print(data.attitude.yaw) } } } 来显示操作表。我看到了基于本机的代码,它为自己的动作表组件使用了静态方法,但是当我使用它时,我的静态方法没有调用,

我的代码

ActionSheet.show()

我想调用MyComponent.show()来更改显示组件的状态

 class MyComponent extends Component {

     state = {
         visible: false
     }

     static show (){
         MyComponent.setState({
             visible: true
         })
     }

     render(){
         return(
             <Component visible={this.state.visible}/>
         )
     }
}

本机代码

MyComponent.show()

本机库通过调用如下show方法显示ActionSheetContainer

  class ActionSheetContainer extends Component {
     constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
        };
    }

    static actionsheetInstance;

    static show() {
         this.actionsheetInstance._root.showActionSheet();
    }

    static hide() {
         this.actionsheetInstance._root.hideActionSheet();
    }

    showActionSheet() {
        this.setState({
            modalVisible: true,
        });
    }

    hideActionSheet() {
        this.setState({ 
            modalVisible: false 
        });
    }

    render() {
        return (
            <Modal
                visible={this.state.modalVisible}
                onRequestClose={() => {
                    this.setState({ modalVisible: false});
                }}>
                // some code
            </Modal>
         );
     }
}

如何像本机一样实现它?

0 个答案:

没有答案