React Native中FlatList显示异常及滚动问题求助

问题原因 #

• 用top/left这类绝对定位调整元素位置，打乱了Flexbox正常布局流，导致组件偏移，滚动时内容被容器裁剪
• SignUpSetting设为flex:1后，内部FlatList未配置正确的布局属性，内容显示异常
• TextInput用了固定的paddingRight:250，不同屏幕尺寸下会导致输入框宽度异常，影响整体布局

修复后的完整代码 #

组件逻辑部分 #

const SignUp: FC = () => {
    const data = [
        { key: 'Full Name', value: '' },
        { key: 'Email Address', value: '' },
        { key: 'Password', value: '' },
    ];
    const [formData, setFormData] = useState(data);

    const handleInputChange = (value, index) => {
        const updatedFormData = [...formData];
        updatedFormData[index].value = value;
        setFormData(updatedFormData);
    };

    const renderItem = ({ item, index }) => (
        <View style={styles.inputSetting}>
            <Text style={styles.inputTxt}>{item.key}</Text>
            <TextInput 
                style={styles.input} 
                value={item.value} 
                onChangeText={(value) => handleInputChange(value, index)}
                placeholder={`Enter your ${item.key.toLowerCase()}`}
            />
        </View>
    );
    return (
        <SafeAreaView style={styles.bg}>
            <View style={styles.imgSetting}>
                <Image style={styles.img} source={require('../assets/WeHAP-1.png')} />
            </View>
            <View style={styles.SignUpSetting}>
                <Text style={styles.createAccountTxt}>Create Account</Text>
                <FlatList 
                    data={formData}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.key}
                    contentContainerStyle={styles.flatListContent}
                />
            </View>
        </SafeAreaView>
    );
};

export default SignUp;

样式定义部分 #

const styles = StyleSheet.create({
    bg: {
        backgroundColor: '#fff',
        flex: 1,
    },
    imgSetting: {
        alignItems: 'center',
        paddingVertical: 20,
    },
    img: {
        width: 120,
        height: 120,
        resizeMode: 'contain',
    },
    SignUpSetting: {
        backgroundColor: '#F2F2F2',
        flex: 1,
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        paddingHorizontal: 30,
    },
    createAccountTxt: {
        color: '#000',
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
        marginVertical: 40,
    },
    flatListContent: {
        gap: 15,
    },
    inputSetting: {
        width: '100%',
    },
    inputTxt: {
        color: '#a1a1a1',
        marginBottom: 5,
    },
    input: {
        backgroundColor: '#fff',
        borderRadius: 10,
        paddingHorizontal: 15,
        height: 45,
        borderColor: '#229954',
        borderWidth: 0.6,
    },
});

关键修改说明 #

1. 替换绝对定位：把top/left改成marginVertical/paddingHorizontal这类Flexbox属性，让元素在正常布局流中，避免滚动时被裁剪
2. 优化FlatList布局：添加contentContainerStyle设置列表项间距，确保FlatList在父容器内正确填充空间
3. 适配输入框宽度：去掉固定的paddingRight:250，改用width: '100%'和paddingHorizontal，让输入框自适应不同屏幕
4. 规范图片容器样式：给图片容器添加居中、内边距样式，保证图片显示位置合理

修改后即可实现组件正常显示、滚动顺畅，背景色不会干扰内容。

内容的提问来源于stack exchange，提问作者HAFIZ MUHAMMAD ZOHAIR AJMAL