React Native平面列表未滚动.无法使用刷新列表,因为滚动不起作用


React Native Flat列表现在将滚动。不确定我在这里做错了什么。我正在使用React Native的最新版本。我需要平面列表来滚动,由于这个问题,当我下拉列表进行刷新时,我无法刷新列表。我还尝试使用道具来启用滚动,但这也不起作用。
<View
style={[
styles.container,
{paddingLeft: insets.left, paddingRight: insets.right},
]}>
<List.Section style={styles.flex}>
<List.Subheader>Profile List:</List.Subheader>
<FlatList
data={data}
style={styles.flex}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => setRefreshing(true)}
tintColor={'blue'}
/>
}
renderItem={({item, index, separators}) => (
<>
<List.Item
title={item.title.rendered}
description={item.content.rendered.replace(/(<([^>]+)>)/gi, '')}
left={props => <List.Icon {...props} icon="layers" />}
right={props => (
<Button
style={{alignSelf: 'center'}}
mode="text"
onPress={() => selectedProfile(item.acf.elmc_custom_layout)}
onLongPress={() => showDialog(item)}>
Download
</Button>
)}
/>
<Divider />
</>
)}
/>
</View>
// my stylesheet for this component
const styles = StyleSheet.create({
container: {
flex: 1,
},
flex: {
flex: 1,
},
});

我发现了这个问题,但不知道如何解决。我使用以下代码,这样当我按下屏幕上的任何位置时,它都会关闭键盘。这段代码关闭了键盘,但阻止了屏幕滚动。我把它放在导航周围,这样所有屏幕都会忽略键盘,但它会导致滚动屏幕的问题。有人能举一个例子吗?当我按下屏幕上的任何地方时,我可以关闭键盘,也可以在需要时滚动屏幕

// allows the keyboard to be dismissed anywhere the screen is pressed
const DismissKeyboard = ({children}) => (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{flex: 1}} onStartShouldSetResponder={() => true}>
{children}
</View>
</TouchableWithoutFeedback>
);
function CustomLayoutNavigator(props) {
return (
<DismissKeyboard?
<Stack.Navigator>
<Stack.Screen
name="CustomLayoutHomeScreen"
component={CustomLayoutScreen}
initialParams={{myData: []}}
options={{
title: 'My Layout',
headerShown: false,
}}
/>

尝试使用ScrollView而不是顶层的View。

试试这个,

const[refreshing,setRefreshing]=useState(false(;

const onRefresh = () => {
//refresh Action
};

<FlatList
data={data}
style={styles.flex}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => onRefresh()}
tintColor="#F8852D"
/>
}
renderItem={({item, index, separators}) => (

)}
/>

最新更新