javascript - 我如何在反应原生的函数中设置映射数据的样式

Question

将数据映射到 react native 中的函数后如何进行样式设置。数据显示正确，但以原始格式显示。我希望将被映射的数据样式化为每个项目之间有空格的行。我曾尝试使用平面列表，但它会引发invariant violation: tried to get frame for out of the range index nan. 请帮忙。

import React, {useEffect, useState} from 'react'
    import { Text, View, ActivityIndicator, ScrollView, StyleSheet } from 'react-native'
    import axios from '../../utils/axios'
    //import CurrencyPair from '../../CurrencyPair'
    
    function HomeScreen() {
        const [data, setData] = useState([])
        const [isLoading, setIsloading] = useState(true)
      
    
        useEffect(() => {
            const interval = setInterval(() => {
                const fetchpairs = async() => {
                    const results = await axios.get('/v3/accounts/{AccountId}/pricing?instruments=AUD_CAD%2CAUD_CHF%2CAUD_JPY%2CAUD_NZD%2CAUD_USD%2CCAD_CHF%2CCAD_JPY%2CCHF_JPY%2CEUR_AUD%2CEUR_CAD%2CEUR_CHF%2CEUR_GBP%2CEUR_NOK%2CEUR_NZD%2CEUR_USD%2CGBP_AUD%2CGBP_CAD%2CGBP_CHF%2CGBP_USD%2CGBP_JPY%2CNZD_CAD%2CNZD_CHF%2CNZD_JPY%2CUSD_CAD%2CUSD_JPY%2CUSD_CHF%2CUSD_ZAR%2CUSD_MXN')
                    console.log(results.data)
                    setData(results.data)
                    setIsloading(false)
                }
                fetchpairs() 
            },1000)
         
                
          
          }, []);
    
          
    if(isLoading) {
        return (
            <ActivityIndicator size="large"/>
        )
    }
    
    else
    return (
        <ScrollView
        contentContainerStyle={styles.contentContainer}
        >
            
            {data.prices && data.prices.map((prices, index) => {
                return (
                  
                            <Text key={index} style={styles.maintext}>
                       {data.prices[index].instrument}
               {data.prices[index].closeoutAsk}
                {data.prices[index].closeoutBid}
                  </Text>
    
                   
                    
                )
            })
        }   
        </ScrollView>
    )
    }
    const styles = StyleSheet.create({
        contentContainer:{
            flex: 1,
            marginTop: 20,
            justifyContent: "space-around"
        }
    })
    
    export default HomeScreen

标签： javascriptreactjsreact-native

Answer 1

只需使用 flex 来设置样式。

{data.prices && data.prices.map((prices, index) => {
                return (
      <View
        key={index}
        style={{
          flexDirection: 'row'
          //justifyContent:'space-between'
        }}>
        <Text style={styles.maintext}>{data.prices[index].instrument}</Text>
        <Text style={(styles.maintext, { marginLeft: 4 })}>{data.prices[index].closeoutAsk}</Text>
        <Text style={(styles.maintext, { marginLeft: 4 })}>{data.prices[index].closeoutBid}</Text>
      </View>
    
                   
                    
                )
            })
        }