Question

使用create-react-native-app，使用Android设备进行测试。我正在尝试在滚动视图中显示全屏照片。图像显示大于我的屏幕，但我既不能滚动也不能缩放。

export default function Photo({ filename }) {
  return (
    <ScrollView
      centerContent
      contentContainerStyle={{ flex: 1 }}
      maximumZoomScale={2}
      minimumZoomScale={1}
    >
      <View style={{ flex: 1 }}>
        <Image style={{ flex: 1 }} source={{ uri: assetPath(filename) }} />
      </View>
    </ScrollView>
  );
}

此组件从顶级react-router Route呈现：

  <NativeRouter>
    <AndroidBackButton>
      <View style={styles.container}>
        <Route path="/" exact component={PhotoListContainer} />
        <Route
          path="/photos/:filename"
          component={({ match }) => (
            <Photo filename={match.params.filename} />
          )}
        />
      </View>
    </AndroidBackButton>
  </NativeRouter>

在我看过的例子中，有一个值得注意的区别：Image元素通常没有任何样式。但是如果删除样式属性，图像就会完全消失。我怀疑至少部分问题源于不了解flex并且不熟悉RN，而且解决方案很简单。如果可以，请帮忙！

Answer 1

这些属性minimumzoomscale和maximumzoomscale仅适用于IOS，不适用于Android

Link to docs

第二件事是“滚动”仅在视图离开屏幕时可用。

ReactNative ScrollView不会滚动或缩放

1 个答案: