Question

我需要渲染两个项目＆＃34; clientcalendarscreenred＆＃34;和＆＃34;营养数据＆＃34;在FlatList中

PS：我正在获取两个数据＆＃34; clientcalendarscreenred＆＃34;和＆＃34;营养数据＆＃34;从reducer到mapStateToProps

<FlatList

               data={this.props.clientcalendarscreenred }

               keyExtractor={this._keyExtractor}

               renderItem={this._renderItem}

               ItemSeparatorComponent={this._renderSeparator}

               refreshing={this.state.refreshing}

               onRefresh={this._onRefresh}
        />

=========== 获取数据 ===============

const mapStateToProps = ({clientcalendarscreenred, maincalendarreducer}) => {

  const { client_id, workout_date, display_date } = maincalendarreducer;

   return { 

        clientcalendarscreenred: clientcalendarscreenred.data,
        nutritiondata: clientcalendarscreenred.nutrition,
    };


};

Answer 1

下面的内容应该可以帮助您从FlatList中的数据道具打印项目。同样，您可以将nutrition数据传递给FlatList并使用它来显示。

const FlatList=(props)=>{
const {data, ...rest}=props;
const toRender= data&&data.length>0?data.map(item=><div>{item.something}</div>:<div/>
return toRender
}

Answer 2

您可以使用此方案的部分列表。您还可以呈现异构或同类的列表，即如果您希望以不同方式呈现您的部分

<SectionList renderSectionHeader={({section}) => this._renderHeader(section.data)} sections={[ { key: 'RedData', data: clientcalendarscreenred.data, renderItem: ({item}) => this.renderRedData(item) }, { key: 'NutritionData', data: clientcalendarscreenred.nutrition, renderItem: ({item}) => this.renderNutrition(item, index, section) }, ]} keyExtractor={(item, index) => index} />

如何在React-native和Redux中的FlatList中呈现2个项目

2 个答案: