反应sectionList周围的原始边界半径

Question

如何像在图像中那样在我的sectionList周围放置边框半径？

Answer 1

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

C:\Users\<User>\AppData\Roaming\NuGet\

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

我们知道列表中的第一项将始终具有索引0，因此当索引为0时，我们可以将borderTopLeftRadius和Right borderTopRightRadius设置为10。当索引达到amountOfItemsInSection（为-1时，因为索引总是开始为0），我们知道我们位于列表的末尾，我们需要关闭边框。

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

Image showing the result

Answer 2

示例

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  SectionList,
  Alert,
  TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import colors from '../Component/Color';
export default class SectonLists extends Component {

  GetSectionListItem = item => {
    Alert.alert(item);
  };

  render() {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {
              title: 'City Name Starts with A',
              data: ['Agra', 'Alinager', 'Amritsar'],
            },
            {
              title: 'City Name Starts with B',
              data: ['Barabanki', 'Bombay', 'Bangalore'],
            },
            {
              title: 'City Name Starts with C',
              data: ['Chakia', 'Chandauli', 'Chouk'],
            },
          ]}
          renderSectionHeader={({section}) => (
            <Text style={styles.SectionHeader}> {section.title} </Text>
          )}
          renderItem={({item}) => (
            <Text
              style={styles.SectionListItemS}
              onPress={this.GetSectionListItem.bind(this, item)}>
              {' '}
              {item}{' '}
            </Text>
          )}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  SectionHeader: {
    backgroundColor: colors.primary,
    fontSize: 20,
    marginTop: 10,
    padding: 5,
    color: '#fff',
    fontWeight: 'bold',
  },
  SectionListItemS: {
    fontSize: 20,
    padding: 6,
    color: '#000',
    backgroundColor: '#F5F5F5',
  },
});

Answer 3

如果您将 sectionList 包含在具有所需 View 和 borderRadius 样式属性的 overflow: 'hidden' 中，那么 sectionList 中的所有内容都将包含在具有所需 borderRadius 的视图中。

示例

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