Question

我正在开发一个React Native测验应用程序。我已经开发了标题组件，看起来很棒。

// import libraries for making a component
import React from 'react';
import { Text, View } from 'react-native';

// make a component
const Header = (props) => {
  const { textStyle, viewStyle } = styles;
  return (
    <View style={viewStyle}>
      <Text style={textStyle}>{props.headerText}</Text>;
    </View>
  );
};

const styles = {
  viewStyle: {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 60,
    paddingTop: 15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    elevation: 2,
    position: 'relative'
  },
  textStyle: {
    fontSize: 20
  }
};

// make a component available to other parts of the app
export default Header;

我将对api做一个ajax请求，这个api有一个类别，然后是每个类别一个测验问题。

当我向此端点发出GET请求时，我返回一个对象数组，每个对象都有一个问题类别和一个布尔问题为true或false。

总而言之，我总共有10个类别，每个类别都有一个问题，共10个问题。

所以我需要弄清楚如何从我的移动应用程序发出Ajax请求或http请求来获取这个数据列表，更重要的是，一旦我有了数据列表，我需要找到一种方法来获取要呈现为标题的类别片段。

这是我坚持的部分。

我计划有一个名为QuestionList的组件，QuestionList的目的是获取数据列表或获取问题列表，一旦获取，它将呈现多个QuestionDetail } 组件。所以我会有一个QuestionList和一个QuestionDetail。

但是，api又有一个每个问题的类别，我想将该类别内容呈现为每个问题的标题。每次用户转到下一个问题时都会有不同的标题。

所以在上面的代码中，不是让标题组件决定应该显示哪些文本，而是稍微重构它，以便app组件决定在那里显示哪些文本。

我是否只是因为我想要完成的事情搞砸了？我是否应该让标题组件决定应显示哪些文本？更重要的是，如何让header组件或App组件呈现不同的类别？我是否应该为每个特定组件创建一个单独的CategoryList组件，然后创建一个CategoryHeader组件，从而为api提供不同的类别？

Answer 1

根据您的要求，您需要SectionList。

它已经支持renderSectionHeader，您可以在其中集成Header组件

一个例子就是

<SectionList 
  renderItem={({ item, index, section }) => <QuestionDetails {...item} />} // Render your Question Details Component here
  renderSectionHeader={({ section: { title } }) => <Header {...title}/>} //... Render your Custom Header Component here 
  sections={[ 
   { title: 'Category1', data: ['question1', 'question2'] }, 
   { title: 'Category2', data: ['question1', 'question2'] }, 
   { title: 'Category3', data: ['question1', 'question2'] }, 
   ]} 
  keyExtractor={(item, index) => item + index} />

这只是一个示例，您可以修改以根据您的要求生成阵列。

React Native渲染到标题组件的不同类别

1 个答案: