使用Flatlist renderItem从JSON渲染文本-文本垂直显示

Question

我正在一个项目上，遇到了从JSON文件中显示文本的问题。看来我正确地处理了JSON，但似乎无法理解为什么文本垂直显示。这是我的代码

import React, { Component } from 'react';
import jsonquotes from "../../../assets/quotes.json";
import { FlatList, View, Text } from 'react-native';

const text = jsonquotes[Math.floor(Math.random()*jsonquotes.length)].text;
const author = jsonquotes[Math.floor(Math.random()*jsonquotes.length)].from;
const data = text + "-" + author;

class DisplayQuote extends React.Component{
render() {
    return(
        <View>
        <FlatList 
        data={data}
        renderItem={({item})=><Text>{item}</Text>
        }
        />
        </View>
    )
}
}
export default DisplayQuote;

这是一张显示问题的图片。如您所见，中间框中的文本是垂直的。我该如何更改？

Answer 1

看起来Text的宽度不够，因此它使字母彼此下移。尝试将Text组件放入具有View样式支撑或固定宽度的flex:1内。