Question

我的应用程序有一个选项卡栏，其中一个图标应放在其中，一部分应覆盖顶部屏幕。但是，可以单击选项卡上存在的图标部分，而不能单击其他组件上的图标。我该怎么解决？

标签条形码：

  <View style={{ backgroundColor: "#2d3238", flexDirection: "row", justifyContent: 'space-around', alignItems: 'center' }}>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Settings')}>
      <View style={{ padding: 5 }}>
        <AntDesign
          style={{ color: '#7d858e', marginVertical: 5 }}
          name="eyeo"
          size={30}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('T')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 35 }}
          name="group"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Map')}>
      <View style={{ position: 'absolute', left: (Dimensions.get('window').width / 2) - 40, top: -25, zIndex: 1 }}>
        <Image
          style={{ height: 80, width: 80 }}
          source={require('../../assets/center.png')}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Q')}>
      <View style={{ padding: 5 }}>
        <Entypo
          style={{ color: '#7d858e', marginLeft: 30, marginRight: 5 }}
          name="chat"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Home')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 5 }}
          name="wifi"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
  </View>

我以这种方式解决了这一问题（忽略了混乱），不同之处在于现在按钮属于整个屏幕，而不仅是标签栏：

 <React.Fragment>
  <View style={{ backgroundColor: "#2d3238", flexDirection: "row", justifyContent: 'space-around', alignItems: 'center' }}>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Settings')}>
      <View style={{ padding: 5 }}>
        <AntDesign
          style={{ color: '#7d858e', marginVertical: 5 }}
          name="eyeo"
          size={30}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('T')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 35 }}
          name="group"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Q')}>
      <View style={{ padding: 5 }}>
        <Entypo
          style={{ color: '#7d858e', marginLeft: 30, marginRight: 5 }}
          name="chat"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Home')}>
      <View style={{ padding: 5 }}>
        <FontAwesome
          style={{ color: '#7d858e', marginRight: 5 }}
          name="wifi"
          size={22}
        />
      </View>
    </TouchableWithoutFeedback>
  </View>
  <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Map')}>
      <View style={{}} style={{ position: 'absolute', left: (Dimensions.get('window').width / 2) - 35, top: 608, zIndex: 1 }}>
        <Image
          style={{ height: 80, width: 80 }}
          source={require('../../assets/center.png')}
        />
      </View>
    </TouchableWithoutFeedback>
  </React.Fragment>

Answer 1

由于绝对定位按钮是Android已知的本机问题，因此您最好的猜测是创建解决方法。将标签栏重构为包括按钮在内的高度，并使上部背景透明。我没有时间现在创建组件并对其进行测试，但是我可以稍后再试。

绝对位置位于组件外部的图标

1 个答案: