5

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

私のプロジェクトの実際のユース ケースでは、FlatList コンポーネントを画面の下 3 分の 1 に配置して、ジョブのリストを表示します。ここでエラーを発見し、問題のデバッグを試み始めました。私のプロジェクトではView、スタイルが の親があり、{flex: 1その子には...がList含まれていますFlatListListreact-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 })
        }
    />
);
};
4

3 に答える 3

6

この問題を解決できました。

<View style={{flex:1}}>解決策は、renderRow がコンポーネントを返した後に flatlist コンポーネントを使用する ことです<View style={{flex:1}}>

于 2018-03-14T13:07:58.877 に答える
0

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

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

于 2017-05-31T03:20:42.943 に答える