水平滚动在react native中不适用于我的整个应用程序

js81xvg6 于 2023-06-06 发布在 React

关注(0)|答案(3)|浏览(224)

import React from 'react';
import { FlatList, View, Image } from 'react-native';

const Slider = () => {
  const images = [
    {
      source:
        'https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467_1280.jpg',
      id: 1,
    },
    {
      source:
        'https://cdn.pixabay.com/photo/2015/08/27/09/22/banner-909710_1280.jpg',
      id: 2,
    },
    {
      source:
        'https://cdn.pixabay.com/photo/2016/03/27/18/52/flower-1283602_1280.jpg',
      id: 3,
    },
  ];

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        pagingEnabled
        horizontal={true}
        contentContainerStyle={{
          flex: 1,
          paddingTop: '5%',
        }}
        data={images}
        renderItem={({ item }) => {
          return (
            <View key={item.id} style={{ padding: 2 }}>
              <View style={{ width: '100%', height: 120 }}>
                <Image
                  source={{ uri: item.source }}
                  style={{ width: '100%', height: 120 }}
                />
              </View>
            </View>
          );
        }}
        keyExtractor={(item) => {
          return item.id.toString();
        }}
        showsHorizontalScrollIndicator={false}
      />
    </View>
  );
};

export default Slider;

react-native

来源：https://stackoverflow.com/questions/76364792/horizontal-scroll-not-working-for-my-entire-app-in-react-native

3条答案

按热度按时间

vyu0f0g11#

检查此固定代码

export default function App() {
  const images = [
    {
      source:
        'https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467_1280.jpg',
      id: 1,
    },
    {
      source:
        'https://cdn.pixabay.com/photo/2015/08/27/09/22/banner-909710_1280.jpg',
      id: 2,
    },
    {
      source:
        'https://cdn.pixabay.com/photo/2016/03/27/18/52/flower-1283602_1280.jpg',
      id: 3,
    },
  ];

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        pagingEnabled
        keyExtractor={(images) => {
          return images.id;
        }}
        showsHorizontalScrollIndicator={false}
        horizontal={true}
        contentContainerStyle={{ flex: 1, paddingTop: '5%' }}
        data={images}
        renderItem={({ item }) => {
          return (
            <View key={item.id} style={{ padding: 12, backgroundColor: 'red' }}>
              <View style={{ width: 100, height: 120 }}>
                <Image
                  source={{ uri: item.source }}
                  style={{ width: '100%', height: 120 }}
                />
              </View>
            </View>
          );
        }}
      />
    </View>
  );
}

赞(0）回复(0）举报 2023-06-06

elcex8rz2#

尝试使用ScrollView

return ( 
 <ScrollView style={{flex:1}}>
  <View style={{flex: 1}}> 
   <FlatList 
     pagingEnabled 
     horizontal
     contentContainerStyle={{ flex: 1, paddingTop: '5%' }} 
     data={images} 
     renderItem={({ item }) => {
      return (
        <View key={item.id} style={{ padding: 12, backgroundColor: 'red' }}>
          <View style={{ width: 100, height: 120 }}>
            <Image
              source={{ uri: item.source }}
              style={{ width: '100%', height: 120 }}
            />
          </View>
        </View>
      );
    }}
   />
  </View>
 </ScrollView>
)

赞(0）回复(0）举报 2023-06-06

dced5bon3#

视图工作得很好，但滚动不工作，它似乎固定在水平视图。

赞(0）回复(0）举报 2023-06-06