Элемент с фиксированной позицией в окне просмотра в React Native Web? - PullRequest
Новая
       30

Элемент с фиксированной позицией в окне просмотра в React Native Web?

0 голосов
/ 10 апреля 2020

Мне нужно прикрепить компонент нижнего колонтитула к нижней части области просмотра. Содержание выше это в ScrollView. Я использую React Native и React Native Web (спасибо Expo) для создания веб-сайтов и нативных.

Это работает для нативного, но не веб-интерфейса: 

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 применяется в Интернете. 

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

Без @ts-ignore Я получаю эту ошибку из TypeScript:

Тип "fixed" не может быть назначен типу "absolute" | "родственник" | undefined '.

Есть ли нехакерский способ сделать это?

...