时间戳

首页 > 解决方案 > 滚动内容时如何使页眉/页脚保持原位？

reactjs - 滚动内容时如何使页眉/页脚保持原位？

问题描述

如何在内容（在屏幕中间滚动）时使页眉和页脚保持在原位？

到目前为止，我尝试使用“flex”属性来做到这一点，但无济于事。

示例代码：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FlatList } from "react-native-web";


export default function App() {
    const items = [];
    for (let i = 1; i <= 200; i++) {
        items.push(`Item number ${i}`);
    }

    return (

        <View style={styles.container}>
            <View>
                <Text>HEADER VALUE</Text>
            </View>
            
            <FlatList
                data={items}
                keyExtractor={item => item}
                renderItem={({item}) => <Text>{item}</Text>}/>

            <View>
                <Text>FOOTER VALUE</Text>
            </View>
        </View>
    );
}

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

本代码的Expo Snack：https ://snack.expo.io/NAoplIFmA

当前的行为是标题被滚动，就好像整个屏幕都被滚动视图包围了一样。但是屏幕被常规视图包围，所以我希望 FlatList 可以滚动，而 Header 保持在原位。

当 FlatList 的内容变得可滚动时，使页眉/页脚保持原位的正确方法是什么？

标签： reactjsreact-nativeexporeact-native-flatlist

解决方案

您可以使用位置：“固定”

给你，这应该解决它..根据您的需要进行更改。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FlatList } from "react-native-web";


export default function App() {
    const items = [];
    for (let i = 1; i <= 200; i++) {
        items.push(`Item number ${i}`);
    }

    return (

        <View style={styles.container}>
            <View style = {styles.header}>
                <Text style = {{textAlign:'center'}}>HEADER VALUE</Text>
            </View>
            
            <FlatList
                data={items}
                keyExtractor={item => item}
                renderItem={({item}) => <Text>{item}</Text>}/>

            <View style = {styles.footer}>
                <Text>FOOTER VALUE</Text>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
  header:
  {
    position:"fixed",
    top:0,
    left:0,
    alignItems:'center',
    justifyContent:'center',
    width:'100%',
    backgroundColor:'blue',
    height:'50px'

  },
  footer:
  {
    position:"fixed",
    bottom:0,
    left:0,
    alignItems:'center',
    justifyContent:'center',
    width:'100%',
    backgroundColor:'blue',
    height:'50px'

  },
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        marginTop:'50px'
    },
});

推荐阅读