React Native Web 中视口上具有固定位置的元素？

Question

我需要将页脚组件粘贴到视口的底部。其上方的内容位于ScrollView. 我使用 React Native 和 React Native Web（感谢 Expo）来构建 Web 和本机。

\n\n

这适用于本机但不适用于网络：

\n\n

export default function App() {\n  return (\n    <View style={styles.container}>\n      <ScrollView>\n        {new Array(100).fill("").map((_, index) => {\n          return <Text key={index}>Blah {index}</Text>;\n        })}\n      </ScrollView>\n      <View style={styles.footer}>\n        <Text>Im a footer</Text>\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: "center",\n  },\n  footer: {\n    backgroundColor: "green",\n    padding: 20,\n    width: "100%",\n  },\n});\n

\n\n

我可以用这段代码破解它。fixed官方不支持，但CSS在web中应用。

\n\n

  footer: {\n    // @ts-ignore\n    position: Platform.OS === "web" ? "fixed" : undefined,\n    bottom: 0,\n    left: 0,\n  }\n

\n\n

如果没有，@ts-ignore我会从 TypeScript 收到此错误：

\n\n

\n

\xc2\xa0\xc2\xa0Type \'"fixed"\' 不可分配给类型 \'"absolute" | “亲戚”| 不明确的\'。

\n

\n\n

有没有一种非 hacky 的方法来做到这一点？

\n