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

【问题标题】：How can I render 2 items in a FlatList in React-native and Redux如何在 React-native 和 Redux 的 FlatList 中呈现 2 个项目
【发布时间】：2018-03-09 08:04:29
【问题描述】：

我需要在 FlatList 中渲染两个项目“clientcalendarscreenred”和“nutritiondata”

PS：我通过 mapStateToProps 从 reducer 获取两个数据“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,
    };


};

【问题讨论】：

标签： react-native react-redux react-native-flatlist

【解决方案1】：

您可以在这种情况下使用部分列表。您还可以呈现异构或同质列表，即如果您希望以不同方式呈现您的部分

<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} />

【讨论】：

【解决方案2】：

类似下面的内容应该可以让您从 FlatList 中的 data prop 打印项目。类似地，您可以将 Nutritiondata 传递给 FlatList 并使用它来显示。

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

【讨论】：