javascript - 无法在 React Native FlatList 的 View 中嵌套文本

Question

我在使用 React Native 时遇到了这个问题 FlatList最近。我想要做的就是使用 FlatList 显示日历 block .这是我的代码

Calendar.js :

import {View , Text, StyleSheet, FlatList} from 'react-native'
import React from 'react'
import {DayItem} from './DayItem'


export const Calendar = () => {
    const DayList = Array.of(42);
    for(i=0;i<42;i++){
        DayList[i] = i;
    }
    const element = DayList.map(item => (<DayItem number = {item}></DayItem>) )
    return(
        <View style = {{flex:3, borderStyle: 'solid' , borderTopWidth:0.5,
                        borderBottomWidth:0.5, alignItems:'center'}}>
            <View style = {{flex:1,borderStyle: 'solid', borderColor: 'blue', borderWidth : 1, 
                            marginTop:5, marginBottom:2, width:370, alignItems:'stretch'}}>
                <View style = {{ flex:1, borderStyle: 'solid', borderBottomWidth: 1,
                               flexDirection:'row', borderBottomColor: 'red', justifyContent: 'space-between',
                                marginTop:3}}>
                    <Text style = {style.textWeek}>Mon</Text>
                    <Text style = {style.textWeek}>Tue</Text>
                    <Text style = {style.textWeek}>Wed</Text>
                    <Text style = {style.textWeek}>Thu</Text>
                    <Text style = {style.textWeek}>Fri</Text>
                    <Text style = {style.textWeek}>Sat</Text>
                    <Text style = {style.textWeek}>Sun</Text>
                </View>
                <View style = {{flex:14, borderStyle: 'solid', borderWidth: 1, borderColor: 'yellow',
                                }}>
                    <FlatList data = {element} renderItem = {renderDayItem} keyExtractor = {keyExtract}
                                 numColumns ={numColumns} />

                </View>
            </View>
        </View>
    )
}
const numColumns = 7

const renderDayItem = ({item})=> (
    <DayItem number = {item}></DayItem>
)

const keyExtract = (item) => item

const style = StyleSheet.create({
    textWeek :{
        color : 'blue',
        fontSize : 11,
        flex:1,
        textAlign: 'center'
    }
})

和DayItem.js它显示一个 View 和嵌套在其中的文本:

import React from 'react'
import {View, StyleSheet,Text } from 'react-native'

export const DayItem = ({number})=>{
    return(
        <View style = {{borderStyle:'solid', borderColor:'black', borderWidth:1,
                        backgroundColor:'yellow', height:40, width:50,
                        marginTop:2, marginLeft:2, marginRight:2, marginBottom:2}}>
            <Text>{number}</Text>                
        </View>
    )
}

当我运行我的代码时，我发现了这个错误:

Invariant Violation: Nesting a View within Text is not currently supported.

但是当我在 Calendar.js 中更改我的代码时进入这个:

<View style = {{flex:14, borderStyle: 'solid', borderWidth: 1, borderColor: 'yellow',
                                }}>
                    {element}

                </View>

代码运行的很好。当我删除 <Text/>里面的元素<View/>在DayItem.js并继续使用 FlatList代码也运行良好，并且呈现得非常好。我想知道也许 React Native 不支持嵌套 Text里面View在FlatList .真的吗？如果那是真的，谁能告诉我如何渲染 <DayItem/>以不同的方式阻止。我希望它们看起来像使用 FlatList 一样漂亮.

而且我的 React Native 版本是 0.59.8

Answer 1

问题是您在 renderDayItem 中将 DayItem 作为 number 传递

const element = DayList.map(item => (<DayItem number = {item}></DayItem>) )


<FlatList data = {element} renderItem = {renderDayItem} keyExtractor = {keyExtract}

const renderDayItem = ({item})=> (
    <DayItem number = {item}></DayItem>
)

因此您的DayItem 代码将类似于

<View style = {{borderStyle:'solid', borderColor:'black', borderWidth:1,
                        backgroundColor:'yellow', height:40, width:50,
                        marginTop:2, marginLeft:2, marginRight:2, marginBottom:2}}>
            <Text><DayItem ...></Text>                
        </View>

我想你想传递 DayList 作为数据而不是 DayItem 的列表

<FlatList data = {DayList} renderItem = {renderDayItem} keyExtractor = {keyExtract}