React native 在截面列表周围反应本机边界半径

如何像图中那样在分区列表周围放置边界半径

示例

import React，{Component}来自'React'；
进口{
样式表，
文本，
看法
章节列表，
警觉的，
可触摸不透明度，
}从“反应本机”；
从“反应本机矢量图标/FontAwesome”导入图标；
从“../Component/Color”导入颜色；
导出默认类扇区列表扩展组件{
GetSectionListItem=项目=>{
警报。警报（项目）；
};
render（）{
返回(
(
{section.title}
)}
renderItem={（{item}）=>(
{' '}
{item}{'}
)}
keyExtractor={（项，索引）=>index}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
},
章节标题：{
背景颜色：colors.primary，
尺寸：20，
玛金托普：10，
填充：5，
颜色：“#fff”，
fontWeight:'粗体'，
},
章节列表项目：{
尺寸：20，
填充：6，
颜色：“#000”，
背景颜色：'#f5'，
},
});

您可以使用节列表部分中的索引和项数来知道何时需要边界半径

 <SectionList
      sections={sections}
      renderItem={({ item, section, index }) => (
        <ListItem
          navigation={this.props.navigation}
          section={section}
          item={item}
          index={index}
        />
      )}
    />

(
)}
/>

在ListItem组件内部，对传递给ListItem的索引和节执行以下操作

我们知道列表中的第一项的索引始终为0，因此当索引为0时，我们可以将borderTopLeftRadius和Right borderTopRightRadius设置为10。当索引到达amountofitemsin部分时（它是-1，因为索引总是从0开始），我们知道我们在列表的末尾，我们需要关闭边界

function ListItem({
  navigation,
  section
  item,
  index,
}) {

  const amountOfItemsInSection = section.data.length - 1

  return (
    <View
      style={{
        height: 50,
        flex: 1,
        flexDirection: "row",
        justifyContent: "space-between",
        marginHorizontal: 20,
        backgroundColor: "grey",
        borderWidth: 1,
        borderBottomWidth: index === amountOfItemsInSection ? 1 : 0,
        borderColor: 'grey',
        borderTopLeftRadius: index === 0 ? 10 : 0,
        borderTopRightRadius: index === 0 ? 10 : 0,
        borderBottomLeftRadius: index === amountOfItemsInSection ? 10 : 0,
        borderBottomRightRadius: index === amountOfItemsInSection ? 10 : 0
      }}
    >
      
      {/* Left */}
      <View>
        <Text>{heading}</Text>
        <Text>{description}</Text>
      </View>
    
    </View>
  )
}

函数列表项({
航行
部分
项目,，
指数
}) {
常量amountofitemsinsinssection=section.data.length-1
返回(
{/*左*/}
{标题}
{说明}
)
}

---

如果使用所需的

边界半径和
溢出：“hidden”
样式属性在
视图中包装
分区列表
，则
分区列表
中的所有内容将包含在具有所需的
边界半径
的视图中

示例

<View style={{ 
    width: '80%', 
    backgroundColor: 'white', 
    borderRadius: 10, ,
    overflow: 'hidden'}}  >
                
    <SectionList
        sections = {sections}
        renderItem = {renderItem}
        renderSectionHeader={renderSectionHeader}                
        keyExtractor = {(item, index) => index.toString()}
        ListEmptyComponent={listEmptyComponent}
        />
</View>


index.toString（）}
ListMPtyComponent={ListMPtyComponent}
/>