React Native列表元素间距设置：应修改哪个样式组件？

我拥有一个可追加的View列表，希望为列表中的每个元素添加间距。以下是我的代码概览、实际代码及样式文件，请问应修改{1}、{2}还是{3}对应的样式组件来实现需求？

代码概览 #

list = []
function func(){
    button(){
        list.append(
             <View style = {1}> 
                  ...
                  ...
                  ...
             </View>
         )
    }

    return(
        <View>
             <View>
                  <Text onPress = {() => button()}> + </Text> 
             </View>

             <ScrollView style = {3}>
                  <View style = {2}>
                      {list}
                  </View>
             </ScrollView>
        </View>
    ) 
}

应用当前效果 #

实际代码 #

import React, { useState, useEffect } from "react";
import {
  View, 
  Text,
  StyleSheet,
  TextInput, 
  ScrollView
} from 'react-native';

function WeatherApp(){
    const [data, setData] = useState([])
    const[i, setI] = useState(0)
    
    const dates = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    const temperatures = [20, 21, 26, 19, 30, 32, 23, 22, 24]
    const cities = ['LA', 'SAN', 'SFO', 'LGA', 'HND', 'KIX', 'DEN', 'MUC', 'BOM']

    const buttonPressed = () => {
        if(i < 9){
            data.push(
                <View style = {styles.weatherBoard}>
                    <Text key = {dates[i]} style = {styles.date}>{dates[i]}</Text>
                    <Text key = {temperatures[i]} style = {styles.temperature}>{temperatures[i]}</Text>
                    <Text key = {cities[i]} style = {styles.cityName}>{cities[i]}</Text>
                </View>
            )
            setData(data)
            setI(i => i + 1)
        }
    }
    useEffect(()=>{}, [i])
    return(
        <View style = {styles.appBackground}>
            <View style = {styles.searchBar}>
                <TextInput style = {styles.searchText} placeholder = "Search City"></TextInput>
                <Text onPress={() => buttonPressed()} style = {styles.addButton}>+</Text>
            </View>
            
            {/* ScrollView can only have one view in it */}
            <ScrollView style = {styles.weatherPanel} >
                <View>
                    {data}
                </View>
            </ScrollView>

        </View>
    )
}

样式文件 #

const styles = StyleSheet.create({
    appBackground:{
        flex: 1,
        backgroundColor: 'black', 
        flexDirection: 'column'
    },

    searchBar:{
        flex: 0.1,
        flexDirection: 'row',
        backgroundColor: 'white', 
        fontSize: 25
    },
    searchText:{
        flex: 8,
        borderWidth: 1
    },
    addButton:{
        flex: 2,
        textAlign: 'center',
        fontSize: 40,
        borderWidth: 1
    },
    // Place where all cities' weather are shown
    weatherPanel:{
        flex: 0.9,
        flexDirection: 'column',
        padding: 15
    },

    // Style for each city 
    weatherBoard:{
        flex: 9, 
        backgroundColor: 'blue',
        borderRadius: 10,
        padding: 10
    },

    // Temporary styles - 
    date: {
        fontSize: 20,
        color: 'white'
    },
    temperature:{
        fontSize: 30
    },
    cityName:{
        fontSize: 30
    }
})

解决方案：修改{1}对应的样式组件（即weatherBoard） #

要实现列表元素间的间距，直接给单个元素的样式添加marginBottom（或marginVertical）即可：

在样式文件的weatherBoard中增加间距属性：

weatherBoard:{
    flex: 9, 
    backgroundColor: 'blue',
    borderRadius: 10,
    padding: 10,
    marginBottom: 10 // 添加底部间距，数值可按需调整
},

如果希望元素上下都有间距，可用marginVertical: 10替代marginBottom。

为什么选{1}？

• {2}是包裹整个列表的容器，给它加间距只能调整容器整体位置，无法实现单个元素间的间隔。
• {3}是ScrollView的样式，仅能控制滚动区域的整体边距，不能作用于内部元素。
• {1}是每个列表元素的独立样式，添加margin属性可直接让元素之间产生间隔，完全匹配需求。

另外，注意你当前更新状态数组的方式存在问题：直接用data.push()修改状态不会触发组件重新渲染，需改用函数式更新：

const buttonPressed = () => {
    if(i < 9){
        setData(prevData => [...prevData, 
            <View style = {styles.weatherBoard}>
                <Text key = {dates[i]} style = {styles.date}>{dates[i]}</Text>
                <Text key = {temperatures[i]} style = {styles.temperature}>{temperatures[i]}</Text>
                <Text key = {cities[i]} style = {styles.cityName}>{cities[i]}</Text>
            </View>
        ])
        setI(i => i + 1)
    }
}

这样才能确保每次添加元素后组件正确刷新，显示新元素和设置的间距。

内容的提问来源于stack exchange，提问作者Parth Gupta