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

Question

我需要在 FlatList

中呈现两个项目 "clientcalendarscreenred" 和 "nutritiondata"

PS：我通过 mapStateToProps

从减速器获取两个数据 "clientcalendarscreenred" 和 "nutritiondata"

<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.Similarly 中的数据道具打印项目你可以将营养数据传递给 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 个项目

How can I render 2 items in a FlatList in React-native and Redux

react-native

react-redux

react-native-flatlist