플랫 리스트가 스크롤되지 않는다.

플랫 리스트가 스크롤되지 않는다.

FlatList가 포함된 컴포넌트를 표시하는 화면을 만들었습니다.어떤 이유에서인지 목록을 스크롤할 수 없습니다.제 실수를 찾아내서 올바른 방향으로 인도해 줄 수 있는 사람이요?

화면 파일에서 렌더링 기능 및 스타일:

render() {
return (
  <View style={styles.container}>
    <SearchBar />
    <ActivityList style={styles.list} data={this.state.data} />
  </View>
);
}
}

const styles = StyleSheet.create({
 container: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'flex-start',
 },
 list: {
  flex: 1,
  overflow: 'hidden',
 },
});

목록 항목 구성요소에서 기능 및 스타일을 렌더링합니다.

export default class CardItem extends React.PureComponent {
render() {
return (
  <View style={styles.cardview}>
    <View style={styles.imagecontainer}>
      <Image
        resizeMode="cover"
        style={styles.cardimage}
        source={{
          uri: this.props.image,
        }}
      />
    </View>
    <View style={styles.cardinfo}>
      <Text style={styles.cardtitle}>{this.props.title}</Text>
      <View style={styles.cardtext}>
        <Text style={styles.textdate}>{this.props.date}</Text>
        <Text style={styles.texthour}>{this.props.hour}</Text>
      </View>
    </View>
  </View>
);
}
}

const styles = StyleSheet.create({
 cardview: {
  flex: 1,
  justifyContent: 'flex-start',
  backgroundColor: 'white',
  elevation: 3,
  maxHeight: 200,
  width: Dimensions.get('window').width - 20,
  margin: 1,
  marginTop: 10,
  borderRadius: 4,
},
imagecontainer: {
 flex: 7,
 height: 140,
 borderRadius: 4,
},
cardimage: {
 flex: 1,
 opacity: 0.8,
 height: 140,
 borderTopLeftRadius: 4,
 borderTopRightRadius: 4,
},
cardinfo: {
 flex: 2,
 flexDirection: 'row',
 justifyContent: 'space-between',
 alignItems: 'center',
 padding: 10,
},
cardtitle: {
 flex: 1,
 fontSize: 16,
 fontWeight: 'bold',
},
cardtext: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'flex-end',
},
textdate: {
 color: '#5e5e71',
},
texthour: {
 color: '#5e5e71',
},
});

내 목록 구성요소에서 기능 및 스타일을 렌더링합니다.

export default class ActivityList extends React.Component {
_renderCardItem = ({ item }) => (
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
);

_keyExtractor = item => item.id;

render() {
return (
  <FlatList
    data={this.props.data}
    renderItem={this._renderCardItem}
    contentContainerStyle={styles.cardcontainer}
    keyExtractor={this._keyExtractor}
  />
);
}
}

const styles = StyleSheet.create({
 cardcontainer: {
  flex: 1,
  overflow: 'hidden',
  backgroundColor: 'white',
  alignItems: 'center',
  width: Dimensions.get('window').width,
  borderWidth: 0,
 },
});

데이터 항목은 모두 고유한 ID, 제목, 날짜, 시간을 가집니다.

이용 가능한 가이드와 문서를 모두 읽고 해결 방법을 찾지 못했습니다.

★★★를 .flex: 1 안에서styles.cardcontainer을 사용하다 "/"contentContainerStyle프롭은 FlatList의 "내부"에 있는 모든 하위 컴포넌트를 래핑하며 정의된 높이 또는 플렉스 값을 갖지 않아야 합니다.를 가 있는 flex: 1는 FlatList를 사용합니다.style={{flex: 1}}건!!

채팅 앱에서 이미지 툴을 추가할 때 트릭 솔루션을 발견했을 때도 이 문제가 발생합니다.

터치 가능 추가만으로WithoutFeedback: 플랫리스트의 모든 요소를 커버합니다.이상하지만 작동한다.

_renderCardItem = ({ item }) => (
<TouchableWithoutFeedback onPress={()=>{}}>
<CardItem
  image={item.image}
  title={item.title}
  date={item.date}
  hour={item.hour}
/>
</TouchableWithoutFeedback>
);

Flat List 스크롤을 가져오려면 다음 단계를 수행하십시오.

<View style={{flex:1}}>
  <FlatList
    data={this.state.data}
    renderItem={({item}) => this.renderData(item)}
    keyExtractor={item => item._id}
    contentContainerStyle={{
    flexGrow: 1,
    }}
  />
</View>

이 질문에 답변하는 다른 사용자:내 FlatList는 터치 가능한 내부에 있었다.Feedback 미포함.그것을 View로 변경하여 다시 스크롤할 수 있게 되었습니다.

Flat List에서도 같은 문제에 직면했습니다.

<View style={styles.list}>
<FlatList/>
</View>

하였습니다.flex : 1, flexGrow :1 style. 내.list style에 됩니다. 을 사용법

저에게 문제는 플랫리스트 아이템 안에 있는 이미지의 크기였습니다.높이를 퍼센티지로 설정했을 뿐인데, 그건 실수였습니다.

여기 약간의 팁이 있습니다.

1: Flat List content Container에 고정 높이를 두지 않음

2: 플랫리스트 내의 자녀는 퍼센티지의 높이를 가질 수 없습니다(50%). 그렇지 않으면 목록의 절반을 가져가고 다른 자녀는 렌더링하지 않습니다.

3: 고정 크기의 Flat List를 content Container Style이 아닌 inside style 속성에 넣으려면

저는 높이를 100%로 설정한 View로 FlatList 전체를 랩하는 것이 해결책이었습니다.

const styles = StyleSheet.create({
  container: {
    padding: "8px",
    height: "100%"
  },
});

<View style={styles.container}>
  <FlatList
    { /* ... */ }
  />
</View>

TouchableWithoutFeedback화면의 아무 곳이나 클릭할 때 키보드 팝업을 제거하기 위해 사용되었던 앱의 최상위 레벨의 래퍼.
이 원인이 , 「」가 되어 버렸습니다.FlatList실제 디바이스에서는 올바르게 동작하지 않습니다(에뮬레이터에서는 정상적으로 동작했습니다). 「」는FlatList정상적으로 동작하고 있었습니다.

저는 투명 뷰가 목록 맨 위에 있었어요!

어떤 이유로든, 그것은 내 안드로이드 버전에만 영향을 미쳤다.

절대적인 위치 때문에 내가 봤을 때 경감이 못 본 것 같아

저도 비슷한 문제가 있었습니다만, 사실 Mac에서는 손가락으로 두 번 클릭하고, 누른 다음 스크롤하는 대신 일반 스크롤처럼 두 손가락을 사용하여 스크롤하는 방식입니다.

FlatList는 터치 가능에 내장되어 있었지만 스크롤할 수 있었습니다.Feedback 미포함.문제는 FlatList 아이템에서 onPressIn 이벤트가 발생하여 스크롤 감지를 방해했다는 것입니다.on Press로 바꾸니까 작동했어요.

를 columnWrapperStyle:

` <FlatList
    horizontal={false}
    data={products}
    columnWrapperStyle={{ flexWrap: 'wrap' }}
    numColumns={2}
    renderItem={renderItem}
    keyExtractor={(item, index) => index} />`

도 많은 않는 position: 'absolute'또는 음의 여백 값을 설정하여 상위 뷰의 범위를 벗어나도록 합니다).흔히 있는 일이지만, 제안된 솔루션 중 어느 것도 나에게 효과가 없었기 때문에, 나는 샌드박스에서 이 사건을 조사하기로 결정했다.

테스트 앱이 있습니다.

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

const App = () => {
  const [toggle, setToggle] = useState(false);
  const [selection, setSelection] = useState("");

  const data = [];
  for (let i = 0; i < 10; i++) {
    data.push({ key: `${i}`, text: `Item ${i}` });
  }

  function renderList() {
    return (
      <View style={{ width: "100%", zIndex: 5 }}>
        <TouchableOpacity
          style={{ width: "100%", height: 40, backgroundColor: "#CCCCCC", padding: 10 }}
          onPress={() => setToggle(!toggle)}
        >
          <Text>{selection}</Text>
        </TouchableOpacity>
        {toggle && (
          <FlatList
            style={{
              width: "100%",
              height: 150,
              backgroundColor: "#FFFFFF",
              top: 40,
              position: "absolute",
              zIndex: 10,
            }}
            data={data}
            renderItem={({ item }) => (
              <TouchableOpacity
                style={{ width: "100%", padding: 5 }}
                onPress={() => {
                  setSelection(item.text);
                  setToggle(!toggle);
                }}
              >
                <Text>{item.text}</Text>
              </TouchableOpacity>
            )}
          />
        )}
      </View>
    );
  }

  return (
    <View style={{ flex: 1, backgroundColor: "#777777", padding: 10 }}>
      {renderList()}
      <View style={{ width: "100%", height: 40, backgroundColor: "#AAAAAA", marginTop: 10 }} />
    </View>
  );
};

export default App;

아이디어는 가능한 한 간단합니다. "화면"에 있는 2개의 "컨트롤"은 드롭다운 목록으로 아래 두 번째 "컨트롤"을 덮어야 하는 드롭 박스를 나타냅니다.맨 위의 "컨트롤"은 처음에 두 번째 "컨트롤"보다 낮은 z 인덱스를 가지므로 이러한 레이아웃은 반드시 z 순서를 사용하여 조작해야 합니다.
결론은 다음과 같습니다.FlatList의 부모(또는 조부모)를 변경하지 마십시오( 참조).zIndex: 5FlatList 경계가 완전히 둘러싸이지 않은 경우, 코드로 style을 입력하고 삭제를 시도합니다).대신 Flatlist 자체에 대해 실행할 수 있습니다(저와 마찬가지로).zIndex: 10정상적으로 동작합니다).

주의: 스크롤을 차단하고 전혀 눈에 띄지 않는 다른 스타일링 옵션은 설정입니다.backgroundColor를 참조해 주세요. 이것은 하지 않을 것입니다.zIndex를 참조해 주세요.

다른 모든 것이 실패했을 경우 디버깅세션을 재시작합니다(react-native run-android 등).

내 경우 플랫리스트 스타일링의 '위치: 절대'가 스크롤을 하지 않게 만들었다.

나한테는 수입처일 수도 있어

"react-native-gesture-handler"에서 {ScrollView} Import;

스크롤은 안 되지만

"react-native"에서 {ScrollView} Import;

will. vscode 확장기능을 자동으로 추가했는데 어떤 이유에서인지 제스처 핸들러를 선택했어요.

Flat List가 스크롤하지 않는 것과 같은 문제가 발생했지만, 위의 어느 솔루션도 도움이 되지 않았다.코드 복사 붙여넣기조차 도움이 되지 않았다.Android 에뮬레이터가 아닌 실제 디바이스에서 앱을 시험해 보는 것으로 해결되었습니다.놀랍게도 동작합니다.다른 에뮬레이터에서도 동작하기 때문에, 에뮬레이터일 가능성이 있습니다.코드가 아닙니다.

언급URL : https://stackoverflow.com/questions/48674848/flatlist-not-scrolling