Question

我正在尝试使用React Native Elements Overlay组件的子级中的onPress属性触发事件。 onPress属性不起作用，即当我按组件时什么也没有发生。

我尝试将zIndex属性添加到父Overlay组件和子组件，其中子组件具有较高的值，父Overlay组件具有较低的值。

    <Overlay
      isVisible
      borderRadius={10}
      overlayStyle={styles.descriptionStyle}
    >
    <View style={styles.descriptionContent}>
      <MaterialIcons
        name="directions"
        size={48}
        color='#FFFFFF'
        />
      <LinearGradient
        colors={['#75cdd9', '#016f7e']}
        style={styles.createSessionButton}
        onPress={() => this.props.navigation.navigate('CreateSession')}
      >
        <Text style={styles.createSessionButtonText}>Créer une sortie</Text>
      </LinearGradient>
    </View>
    </Overlay>

预期结果：通过堆栈导航器触发导航到“ CreateSession”组件/屏幕。

实际结果：未触发任何事件。通过在回调函数中实现控制台日志进行验证。 MaterialIcons组件遇到相同的问题和行为。

我是初学者，所以请耐心等待。

Answer 1

在React Native中，您应该使用Touchable包装可交互的组件，因为只有一些基本组件支持onPress属性（例如Text和View）。 react-native-linear-gradient不支持onPress属性，因此您必须向onPress组件添加Text或将线性渐变包装到Touchable中。

有一个Text的示例：

<Overlay
  isVisible
  borderRadius={10}
  overlayStyle={styles.descriptionStyle}
>
  <View style={styles.descriptionContent}>
    <MaterialIcons
      name="directions"
      size={48}
      color='#FFFFFF'
      />
    <LinearGradient
      colors={['#75cdd9', '#016f7e']}
      style={styles.createSessionButton}
    >
      <Text
        style={styles.createSessionButtonText}
        onPress={() => this.props.navigation.navigate('CreateSession')} // here
      >
        Créer une sortie
      </Text>
    </LinearGradient>
  </View>
</Overlay>

对于LinearGradient：

 <Overlay
  isVisible
  borderRadius={10}
  overlayStyle={styles.descriptionStyle}
>
  <View style={styles.descriptionContent}>
    <MaterialIcons
      name="directions"
      size={48}
      color='#FFFFFF'
      />
    <TouchableOpacity onPress={() => this.props.navigation.navigate('CreateSession')}> // here
      <LinearGradient
        colors={['#75cdd9', '#016f7e']}
        style={styles.createSessionButton}
      >
        <Text style={styles.createSessionButtonText}>Créer une sortie</Text>
      </LinearGradient>
    </TouchableOpacity>
  </View>
</Overlay>

您可以在React Native docs.中找到有关Touchable组件的更多信息

如何在React Native Elements库的Overlay组件的子元素上启用onPress？

1 个答案: