Как отображать мои данные в таблице и отображать данные в реальном времени (например, цену акций)

Question

Nifty50 - это компонент моего реагирующего приложения, в котором моя цель - отображать данные с json -сервера, который содержит данные в следующем формате:

{
    "nifty50":
        [
            {
                "CompanyName": "Adani Ports and Special Economic Zone Ltd.",
                "Industry": "SERVICES",
                "Symbol": "ADANIPORTS",
                "Series": "EQ",
                "ISINCode": "INE742F01042\r"
            },
            {
                "CompanyName": "Asian Paints Ltd.",
                "Industry": "CONSUMER GOODS",
                "Symbol": "ASIANPAINT",
                "Series": "EQ",
                "ISINCode": "INE021A01026\r"
            },
            ...
        ]
}

Компонент Nifty50 - это следующим образом:

import React, { Component } from 'react';
import { FlatList} from 'react-native-gesture-handler';
import { ListItem } from 'react-native-elements';
import { connect } from 'react-redux';

const mapStateToProps = state => {
    return {
        nifty50 : state.nifty50
    }
}

class Nifty50 extends Component
{
    render()
    {
        const renderStocks = ({item, index}) => {
            return(
                <ListItem 
                    //onPress = {() => navigate('Details', {isinCode : item.isinCode})}
                    key = {index}
                    title = {item.Symbol}
                    subtitle = {item.CompanyName}
                    hideChevron = {true}
                />
            );
        }
    
        return(
                <FlatList 
                    data = {this.props.nifty50.nifty50}
                    renderItem = {renderStocks}
                    keyExtractor = {item => item.ISINCode}
                />
        );
    }
}

export default connect(mapStateToProps)(Nifty50);

Но это отображает «Символ» и «Название компании» в простой форме списка, но мне нужно отобразить их в табличной форме и показать детали каждой акции, такие как цена и Рыночный капитал в реальном времени.

Answer 1

Вместо ListItem верните View.

<TouchableOpacity>
    <View>
        // All details goes here
    </View>
</TouchableOpacity>

Я также предлагаю поместить ваш renderStocks () вне метода render ().