web-dev-qa-db-ja.com

ReactネイティブScrollView / FlatListがスクロールしない

FlatList（つまり、ScrollView）内に配置したいデータのリストがあり、下にスクロールしてリストをさらに表示しようとすると、ScrollViewがリストの一番上に戻るだけなので、リストの一番下。

Expoを使用していますが、奇妙なことに、新しいプロジェクトを作成したり、コードをコピーしてSnackに貼り付けたりすると、スクロールは問題なく機能します。リストをスクロールできないのは、現在のプロジェクトだけです。 main.jsファイルにアクセスして、サンプルコードをそこに貼り付けたところ、問題が解決しません。

私のサンプルコードはここにあります： https://snack.expo.io/ryDPtO5-b この正確なコードをプロジェクトに貼り付けましたが、期待どおりに機能していません。

バージョン：RN 0.44/Expo SDK 17.0.0/React：16.0.0-alpha.6

私のプロジェクトの実際のユースケースでは、画面の下3分の1にFlatListコンポーネントを配置して、ジョブのリストを表示します。ここでエラーを発見し、問題のデバッグを開始しました。私のプロジェクトでは、{flex: 1のスタイルの親Viewと、List... FlatListを含むListの子があります。 react-native-elementsから来ています

[〜＃〜]編集[〜＃〜]

これが私が実際に使おうとしているコードです：

 <View style={styles.container}>
<View style={containerStyles.headerContainerStyle}>
    <Text style={[textStyles.h2, { textAlign: "center" }]}>
        Territory: {this.props.currentTerritory}
    </Text>
</View>
<View style={styles.mapContainer}>
    <MapView
        provider="google"
        onRegionChangeComplete={this.onRegionChangeComplete}
        region={this.state.region}
        style={{ flex: 1 }}
    >
        {this.renderMapMarkers()}
    </MapView>
</View>
<Badge containerStyle={styles.badgeStyle}>
    <Text>Orders Remaining: {this.props.jobsList.length}</Text>
</Badge>
<List containerStyle={{ flex: 1 }}>
    <FlatList
        data={this.props.jobsList}
        keyExtractor={item => item.id}
        renderItem={this.renderJobs}
        removeClippedSubviews={false}
    />
  </List>
 </View>;

そして私のすべてのスタイル

const styles = StyleSheet.create({
container: {
    flex: 1,
},
mapContainer: {
    height: 300,
},
badgeStyle: {
    backgroundColor: 'green',
    alignSelf: 'center',
    marginTop: 15,
    width: 300,
    height: 35,
},
});

そして最後に、私のrenderItem関数：

 renderJobs = ({ item }) => {
const { fullAddress, pickupTime } = item;

return (
    <ListItem
        containerStyle={
            item.status === "active" && { backgroundColor: "#7fbf7f" }
        }
        title={fullAddress}
        titleStyle={{ fontSize: 14 }}
        subtitle={pickupTime}
        subtitleStyle={{ fontSize: 12, color: "black" }}
        onPress={() =>
            this.props.navigation.navigate("jobActions", { job: item })
        }
    />
);
};
reactjsreact-nativeexpo
5
cruz02148

私はこの問題を解決することができました。

解決策は、フラットリストコンポーネントを使用することです<View style={{flex:1}}>renderRowの後にコンポーネントを返す<View style={{flex:1}}>

6
mbilalbark

混乱しています-FlatListまたはScrollViewを使用していますか-これら2つの要素には完全に異なるライフサイクルイベントがあります（FlatListでは、個々の行のレンダリング方法とその一方、ScrollViewは、子がコンポーネントとインラインでレンダリングされることを想定しています）。

とにかく、問題はあなたの構造にあると思います。List要素にもheight属性が必要なようです（{flex: 1}）絶対親がそのスペースを埋めているため、Listコンポーネントには事前定義された高さがありません。

3
Andrew Breen

ルートにflex：1を追加することで問題を解決しました

2
Firoz Ahmed

そのため、今日これをもう少しデバッグした後、新しいExpoプロジェクトを作成し、すべてのソースコードをコピーして新しいプロジェクトに貼り付け、Githubプロジェクト名を新しい名前に変更し、リモートOriginをgithubに設定することになりました。新しいローカルプロジェクトのレポ（名前を変更したもの）。

なんらかの理由で、万博プロジェクトに問題があるように見えました。新しいプロジェクトの名前を元のプロジェクトの名前に変更しようとしたときに、プロジェクトの実際のNAMEが問題を引き起こしているように見えましたが、機能しませんでした。これは、まったく新しいプロジェクトを実行する場合にのみ機能しましたが、まったく同じソースコードを使用していました。

0
cruz02148