在现有的视图组件中添加多个文本组件-REACT NATIVE

Question

“我的组件”由以下内容组成。状态包含article对象，有关文章的详细信息，而该对象又包含content数组，这是我打算在其中存储Text节点的地方。

state = {
    article: {
        content: [],
        datePosted: null,
    },
};

我目前正在做的是，我正在根据收到的内容创建一个数组。通过这种方式：

componentDidMount() {
    const { navigation } = this.props;

    // id is the id of the article in the database
    const id = navigation.getParam("id", "0");


    // getDataFromLocalDb is just a fetch call

    getDataFromLocalDb(`articles/${id}`).then((article) => {
        const content = article.content
            .split("\n\n")
            .map(
                (item, index) => (
                    <Text style={ { marginTop: 5, marginBottom: 5 } } key={ index }>{item}</Text>
                ),
            );

        console.log(content);

        this.setState(prevState => ({
            article: {
                ...prevState.article,
                content,
            },
    }));
});

在render方法的返回值内，我的代码是这样的：

<View
    style={
        {
            marginHorizontal: 20,
            marginTop: 5,
            marginBottom: 5,
        }
    }
>
    { this.state.article.content }
</View>

上面期望的输出是：

<View
    style={
        {
            marginHorizontal: 20,
            marginTop: 5,
            marginBottom: 5,
        }
    }
>
    <Text style={ { marginTop: 5, marginBottom: 5 } } key={ 1 }>Line of content</Text>
    <Text style={ { marginTop: 5, marginBottom: 5 } } key={ 2 }>Some other line of content</Text>
    .
    .
    .
    .
    <Text style={ { marginTop: 5, marginBottom: 5 } } key={ n }>nth line of content</Text>

</View>

我无法找出正确且最有趣的方式？