web-dev-qa-db-ja.com

FlatListがスクロールしない

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、タイトル、日付、時間を持っています。

利用可能なすべてのガイドとドキュメントを読んでください。解決策は見つかりませんでした。

javascriptcssreactjsreact-nativereact-native-android
12
matthiasgoossens

flex: 1のstyles.cardcontainerを取り出します。これでスクロールできます。 FlatList/ScrollView contentContainerStyle propは、すべての子コンポーネント（必要に応じてFlatListの「内部」にあるもの）をラップし、定義された高さまたはフレックス値を持つことはありません。 FlatList自体にflex: 1を設定する必要がある場合は、代わりにstyle={{flex: 1}}を使用してください。乾杯！

23
swimisbell

チャットアプリに画像ツールを追加するときにもこの問題に遭遇し、トリックソリューションを見つけました。

TouchableWithoutFeedbackを追加するだけで、フラットリストのすべての要素をカバーできます。奇妙ですが、動作します。

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