React Native touchableOpacity 和 ScrollView 在 ios 或 android 上未按预期工作

Question

我正在使用 ScrollView 创建一个列表，并尝试在所有呈现的项目上使用可触摸的不透明度。列表中只有 6 个项目，但我只能让 touchableOpacity 处理最后 2 个项目。

我在组件文件夹中使用 touchableOpacity，然后将其导入另一个屏幕上的 ScrollView。知道我做错了什么或如何解决这个问题吗？

组件代码如下

const FlatBench = (props) => {
  return (
    <View>
      <ImageBackground
        style={Styles.secondaryImages}
        source={require("../assets/images/FlatBenchPress.png")}
      >
        <TouchableOpacity style={Styles.textContainer}>
          <Text style={Styles.text}>Flat Bench</Text>
        </TouchableOpacity>
      </ImageBackground>
    </View>
  );
};

const Styles = StyleSheet.create({
  secondaryImages: {
    width: "90%",
    height: "80%",
    marginTop: 200,
    shadowColor: "black",
    shadowOffset: { width: 1, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.26,
    padding: 10,
    width: 160,
    height: 100,
    borderRadius: 18,
  },
  textContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "black",
  },
  text: {
    color: "#F5EDED",
    fontSize: 20,
    textAlign: "center",
  },
});`

屏幕下方的 ScrollView 代码

    const StatsScreen = (props) => {
  return (
    <View style={Styles.container}>
      <View style={Styles.head}>
        <BodyPartsImage style={Styles.top} />

        <View style={Styles.top}>
          <BigButton title="Body Parts" />
        </View>
      </View>

      <ScrollView style={Styles.scrollContainer}>
        <View style={Styles.bottom}>
          <View style={Styles.topItem}>
            <TouchableOpacity>
              <FlatBench />
            </TouchableOpacity>
          </View>
          <View style={Styles.topItem}>
            <FlatBench />
          </View>
          <View style={Styles.bottomItem}>
            <FlatBench />
          </View>
          <View style={Styles.bottomItem}>
            <FlatBench />
          </View>
          <View style={Styles.bottomItem}>
            <FlatBench />
          </View>
          <View style={Styles.bottomItem}>
            <FlatBench />
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const Styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {},
  top: {
    flex: 1,
    height: "1%",
    alignItems: "center",
    justifyContent: "center",
  },
  bottom: {
    height: "50%",
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: -100,
  },
  bottomItem: {
    width: "50%",
    height: "50%",
    padding: 5,
    marginBottom: -40,
    shadowColor: "white",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.26,
    shadowRadius: 6,
    elevation: 1,
    justifyContent: "center",
  },
  topItem: {
    width: "50%",
    height: "50%",
    padding: 5,
    marginBottom: 10,
    shadowColor: "white",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.26,
    shadowRadius: 6,
    elevation: 1,
    marginTop: -30,
  },

  buttonA: {
    marginTop: -70,
    marginLeft: "12%",
    borderWidth: 5,
    borderColor: "#d72323",
    alignItems: "center",
    justifyContent: "center",
    width: 120,
    height: 40,
    backgroundColor: "#00000000",
    borderRadius: 10,
  },
  head: {
    paddingBottom: -100,
  },
});

Answer 1

您需要重构间距并找到更好的组合：您为每个 FlatBench 设置了固定高度，但您将它们放在一个流体高度容器中并进行负边距。所以 FlatBench 高度和它的（非常大的）边距相互覆盖。

如果您删除以下行，您可以在 (bottom, bottomItem, topItem) 上实现具有正边距的布局

FlatBench 样式修复：

secondaryImages: {
    // width: '90%',
    // height: '80%',
    // marginTop: 200,
    shadowColor: 'black',
    shadowOffset: { width: 1, height: 2 },
    shadowRadius: 6,
    shadowOpacity: 0.26,
    padding: 10,
    width: 160,
    height: 100,
    borderRadius: 18,
}

StatsScreen 样式修复：

  bottom: {
    height: "50%",
    flexDirection: "row",
    flexWrap: "wrap",
    // marginTop: -100,
  },
  bottomItem: {
    width: "50%",
    // height: '50%',
    padding: 5,
    // marginBottom: -40,
    shadowColor: "white",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.26,
    shadowRadius: 6,
    elevation: 1,
    justifyContent: "center",
  },
  topItem: {
    width: "50%",
    // height: '50%',
    padding: 5,
    // marginBottom: 10,
    shadowColor: "white",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.26,
    shadowRadius: 6,
    elevation: 1,
    // marginTop: -30,
  }

React Native touchableOpacity 和 ScrollView 在 ios 或 android 上未按预期工作

React Native touchableOpacity and ScrollView not working as expected on ios or android

react-native

react-native-android

react-native-ios

react-native-scrollview