reactjs - React Native Web，FlatList 扩展页面

Question

我有一些应用程序，看起来像这样

我需要 FlattList 独立滚动，但它不是扩展页面并与其他所有内容一起滚动。

我尝试过使用布局，更改 'flex' 和 'justify' 参数，但它没有给我任何结果。

唯一迫使 FlatList 自行滚动的是手动更改父 View 的高度，这显然不是解决方案。

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


const styles = StyleSheet.create({
    head: {
        height: 64,
        alignSelf: 'stretch',
        alignItems: 'center',
        flexDirection: 'row',

        backgroundColor: "#FFF",
        shadowColor: "#000",
    },

    search: {
        height: 48,
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 16,

        marginBottom: 8,
        backgroundColor: "#FFF",
    },

    card: {
        height: 240,
        margin: 8,
        backgroundColor: "#FFF",
        borderRadius: 16,
    },

    filtersCard: {
        width: 280,
        height: 500,
        marginLeft: 16,
        paddingBottom: 34,
        alignItems: 'center',

        backgroundColor: "#FFF",
        borderRadius: 16,
    },

    filtersCardText: {
        alignSelf: 'start',
        fontSize: 24,
        marginBottom: 8,
        marginTop: 16,
        marginLeft: 24,
    } });

const App = () => {   return (
      <View style = {{
          flex: 1,
          backgroundColor: '#cCcFd1',
          alignItems: 'center',
      }}>
          <View style = {styles.head}>
              <Text style = {{fontSize: 48, fontWeight:900, paddingLeft: 16, selectable: false}}>HEAD (shouldn't move)</Text>
          </View>

          <View style={{ flexDirection: 'row', alignItems: "flex-start", marginTop: 16}}>
              <View style={{width: 872}}>
                  <View style={styles.search}><Text>  Search (shouldn't move)</Text></View>

                  <View style={{height: 400}}>
                      <FlatList
                          data={[ 1, 2, 3, 5, 8]} //just for demo
                          renderItem={({item}) => <View style={styles.card}/>}
                      />
                  </View>

              </View>

              <View style={styles.filtersCard}><Text> Filters (shouldn't move)</Text></View>
          </View>
      </View>

  ); }

export default App;

Answer 1

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  FlatList,
  Image,
  SafeAreaView,
} from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.wrapper}>
      <View style={styles.head}>
        <Text>Head (shouldn't move)</Text>
      </View>
      <View
        style={styles.body}>
        <View style={styles.col1}>
          <View style={styles.search}>
            <Text> Search (shouldn't move)</Text>
          </View>

          <View style={{ height: 400, flex: 1 }}>
            <FlatList
              data={[1, 2, 3, 5, 8]} //just for demo
              renderItem={({ item }) => <View style={styles.card} />}
            />
          </View>
        </View>
        <View style={styles.col2}>
          <Text> Filters (shouldn't move)</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    backgroundColor: '#cCcFd1',
  },

  head: {
    backgroundColor: '#FFF',
  },

  body: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginTop: 16,
    flex: 1,
  },

  search: {
    marginBottom: 8,
    backgroundColor: '#FFF',
  },

  card: {
    height: 240,
    backgroundColor: '#FFF',
    marginVertical: 8,
  },

  col1: {
    width: '60%',
  },

  col2: {
    height: 500,
    width: '40%',
    marginLeft: 16,
    backgroundColor: '#FFF',
  },
});

https://snack.expo.io/JR8D0GNd_