1

我正在尝试使用 React Native Elements Overlay 组件的子组件中的 onPress 属性触发事件。onPress 属性不起作用，即当我按下组件时没有任何反应。

我尝试向父 Overlay 组件和子组件添加 zIndex 属性，子组件具有较高的值，而父 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 组件也遇到了同样的问题和行为。

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

4

1 回答 1

0

在 React Native 中，您应该使用可交互组件来包装，Touchable因为只有一些基本组件支持onPressprop（例如 Text 和 View）。react-native-linear-gradient不支持onPressprop，因此您必须添加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>

更多关于Touchable你可以在 React Native文档中找到的组件。

于 2019-07-15T18:50:18.170 回答