Question

我是React Native的新手，我想为我构建一个小应用程序。

所以我有一个带图片的TouchableOpacity，我想通过单击图像来打开“弹出窗口”。

对于使用PopupDialog的Pop即时消息，它可以通过按钮正常工作。参见下面的代码：

const scaleAnimation = new ScaleAnimation();

const styles = StyleSheet.create({
  **CSS***
});

export default class App extends Component {
  state = {
    dialogShow: false,
  };

  showScaleAnimationDialog = () => {
    this.scaleAnimationDialog.show();
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.container}>
          <DialogButton text="Show Dialog - Scale Animation" onPress={this.showScaleAnimationDialog} />
        </View>

        <PopupDialog
          ref={(popupDialog) => {
            this.scaleAnimationDialog = popupDialog;
          }}
          dialogAnimation={scaleAnimation}
          dialogTitle={<DialogTitle title="Popup Dialog - Scale Animation" />}
          actions={[
            <DialogButton
              text="DISMISS"
              onPress={() => {
                this.scaleAnimationDialog.dismiss();
              }}
              key="button-1"
            />,
          ]}
        >
          <View style={styles.dialogContentView}>
            <DialogButton
              text="Show Dialog - Default Animation"
              onPress={this.showFadeAnimationDialog}
            />
          </View>
        </PopupDialog>
      </View>
    );
  }
}

现在我要将其添加到我的图标

const scaleAnimation = new ScaleAnimation();

state = {
  dialogShow: false,
};

showScaleAnimationDialog = () => {
  this.scaleAnimationDialog.show();
}

export default class App extends React.Component {

  render() {

    const CustomDrawerComponent = (props) => (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.icon_div}>
          <TouchableOpacity onPress={this.showScaleAnimationDialog} >
            <Image style={styles.icon} source={require('./src/gfx/icon.png')} />
          </TouchableOpacity>

          <PopupDialog ref={(popupDialog) => { this.scaleAnimationDialog = popupDialog; }} dialogAnimation={scaleAnimation}
            dialogTitle={<DialogTitle title="Test" />}
            actions={[ <DialogButton text="Zurück" onPress={() => { this.scaleAnimationDialog.dismiss(); }} key="button-1" /> ]} >
            <View style={styles.dialogContentView}>
              <DialogButton text="Show Dialog - Default Animation" />
            </View>
          </PopupDialog>
        </View>
        <ScrollView>
          <DrawerItems {...props} />
        </ScrollView>
      </SafeAreaView>
    )
    const AppDrawerNavigator = createDrawerNavigator({
      Home: HomeScreen,
      Settings: SettingsScreen,
      Test: test,
    },{
      contentComponent: CustomDrawerComponent,
      drawerWidth: 300,
    })

    return(
      <BackgroundImage style={styles.container}>
        <AppDrawerNavigator />
      </BackgroundImage>
    )


}
}

当我单击图标时，没有任何反应。我不知道我的问题在哪里..有人可以帮助我吗？

非常感谢..如果您有任何疑问，请随时问我

在TouchableOpacity标签上反应Native PopupDialog

0 个答案: