react-native - 反应 sectionList 周围的原生边界半径

Question

如何在我的 sectionList 周围放置一个边框半径，就像在图像中一样？

标签： react-native

Answer 1

您可以做的是使用部分列表部分中的索引和项目数来了解何时需要边框半径。

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

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

我们知道列表中的第一个项目的索引始终为 0，因此我们可以在索引为 0 时将borderTopLeftRadius 和RightborderTopRightRadius 设置为10。当索引达到amountOfItemsInSection 时（它是-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>
  )
}

显示结果的图像