css React Native中溢出滚动不起作用

falq053o 于 2023-01-14 发布在 React

关注(0)|答案(2)|浏览(230)

我试图让溢出滚动与我的React Native应用程序使用NativeWind CSS，这是本机版本的顺风CSS。
我对CSS相对缺乏经验，所以我真的很难让下面的工作。
我已经剥离了我的应用程序回到基本上没有与下面的三个文件，以便尝试让这个工作，并了解我哪里出错，但仍然没有成功。

import { StatusBar } from "expo-status-bar";
import { Text, View, SafeAreaView } from "react-native";
import Box from "./components/box";
import SafeViewAndroid from "./SafeViewAndroid";

export default function App() {
  return (
    <SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
      <StatusBar style="auto" />
      <View className="h-screen overflow-scroll">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((_, i) => (
          <Box key={i} />
        ))}
      </View>
    </SafeAreaView>
  );
}

import React from "react";
import { View, Text } from "react-native";

const Box = () => {
  return (
    <View className="flex-1 h-10 w-screen border-2 border-gray-800 items-center justify-between">
      <Text>Box</Text>
    </View>
  );
};

export default Box;

import { StyleSheet, Platform, StatusBar } from "react-native";

export default StyleSheet.create({
  AndroidSafeArea: {
    flex: 1,
    backgroundColor: "#FFF",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
  },
});

css

来源：https://stackoverflow.com/questions/75116828/overflow-scroll-not-working-in-react-native

2条答案

按热度按时间

brgchamk1#

React Native中的滚动与浏览器中的滚动略有不同，这不是样式问题，有一个ScrollView需要 Package 您想要滚动的内容，例如：

import { StatusBar } from "expo-status-bar";
import { ScrollView, View, SafeAreaView } from "react-native";
import Box from "./components/box";
import SafeViewAndroid from "./SafeViewAndroid";

export default function App() {
  return (
    <SafeAreaView style={SafeViewAndroid.AndroidSafeArea}>
      <StatusBar style="auto" />
      <ScrollView>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((_, i) => (
          <Box key={i} />
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

如果你对这个实现有任何问题，点击上面的链接访问文档。他们讨论了边缘情况。
如果要滚动的列表很长，最好使用FlatList。

赞(0）回复(0）举报 2023-01-14

wa7juj8i2#

因此，正如前面提到的答案是使用ScrollView。我有一个下面的例子是什么修复它。
如果你想水平滚动，那么只需在下面的滚动视图中使用“水平”关键字。

import React from "react";
import { ScrollView, Text, View } from "react-native";

const Box = () => {
  return (
    <ScrollView horizontal>
      <View className="flex flex-row">
        <Text className="h-10 w-48 bg-slate-500">Box</Text>
        <Text className="h-10 w-48 ">Box</Text>
        <Text className="h-10 w-48 bg-slate-500">Box</Text>
        <Text className="h-10 w-48 bg-slate-500">Box</Text>
        <Text className="h-10 w-48 ">Box</Text>
      </View>
    </ScrollView>
  );
};

export default Box;

赞(0）回复(0）举报 2023-01-14

我来回答

css React Native中溢出滚动不起作用

2条答案

相关问题

热门标签

最新问答