expo - React Native Web中视口上固定位置的元素？

Question

我需要将页脚组件粘贴到视口的底部。它上面的内容在一个ScrollView. 我使用 React Native 和 React Native Web（感谢 Expo）为 web 和 native 构建。

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

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView>
        {new Array(100).fill("").map((_, index) => {
          return <Text key={index}>Blah {index}</Text>;
        })}
      </ScrollView>
      <View style={styles.footer}>
        <Text>Im a footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
  },
  footer: {
    backgroundColor: "green",
    padding: 20,
    width: "100%",
  },
});

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

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

没有@ts-ignore我从 TypeScript 得到这个错误：

  类型 '"fixed"' 不能分配给类型 '"absolute" | “亲戚” | 不明确的'。

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

标签： exporeact-native-web