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

Question

我试图让溢出滚动工作与我的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,
},
});

Answer 1

在React Native中滚动与在浏览器中略有不同。这不是一个样式问题，有这个ScrollView需要包装的东西，你想有一个滚动，作为一个例子:

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。

Answer 2

所以正如我提到的答案是使用ScrollView。下面我有一个例子来说明如何解决这个问题。

如果你想水平滚动，只需使用"horizontal"关键字

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;