The button needs a View wrapped around it to set the style

Button source code, Button in addition to the accessibilityLabel, color, onPress, title, disabled, testID, these attributes are not effective. In addition, there is only a Text inside the Button. The child controls you insert into the Button will not be displayed

TouchableHighlight

TouchableHighlight can have only one child control, and if you have multiple controls such as text and images, you need to wrap a View layer

How do I set the default props

The use of the SectionList


<SectionList
                ListHeaderComponent={<View style={{backgroundColor: "red", height: 40}} ></View>}
                ListFooterComponent={<View style={{backgroundColor: "green", height: 40}} ></View>}
                renderItem={({item, index, section}) => <Text style={{flex: 1, height: 50}}>section:{section.key}----{item.title}----{index}</Text>}
                renderSectionHeader={({section}) => <Text style={{backgroundColor: 'yellow'}}>Header: {section.key}</Text>} renderSectionFooter={({section}) => <Text style={{backgroundColor:'purple'}} > Footer: {section. Key} < / Text >} stickySectionHeadersEnabled = {false}
                sections={[
                    {
                        key: 's1',
                        data: [
                            {title: '0 item', key: '0'},
                            {title: '1 item', key: '1'},
                            {title: '2 item', key: '2'},
                    ]},
                    {
                        key: 's2',
                        data: [
                            {title: '0 item', key: '0'},
                            {title: '1 item', key: '1'},
                            {title: '2 item', key: '2'},
                            {title: '3 item', key: '3'}},],]} / >Copy the code

See the official SectionList document for the rest of the attributes