Question

关于如何更改ListItem的触摸样式的任何想法？ “建议/联系人”突出显示，触摸时显示为灰色。

dbAttachSavePWD

样式：

import React, { Component } from 'react';
import { ScrollView, Switch } from 'react-native';
import Constants from '../models/Constants';
import Styles from '../styles/Styles';
import { Container, Content, Header, List, ListItem, Body, CheckBox, Title, Left, Right, Icon, Text } from 'native-base';

import { Col, Grid } from 'react-native-easy-grid';
import Colours from '../models/Colours';
import SettingsData from '../data/SettingsData';


export default class Settings extends Component {
constructor(props){
    super(props)
}

render() {
    const isKM = true;

    return (

            <Container style={Styles.dark}>
                <Header transparent noShadow>
                    <Left style={Styles.headerSide}/>
                    <Body style={Styles.headerBody}>
                        <Title style={Styles.headerTitle}>Settings</Title>
                    </Body>
                    <Right style={Styles.headerSide}/>
                </Header>
                <ScrollView>

                    <Content>
                        <List>

                            <ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('SignIn')}>
                                <Left>
                                    <Body>
                                        <Text style={Styles.listTitle}>Sign up</Text>
                                        <Text note style={Styles.subtitle}>To save your data when swapping device</Text>
                                    </Body>
                                </Left>
                                <Right>
                                    <Icon name="arrow-forward" />
                                </Right>
                            </ListItem>

                            <ListItem  style={Styles.listItem} titleStyle={Styles.title}>
                                <Left>
                                    <Body>
                                        <Text style={Styles.listTitle}>Smart Track</Text>
                                        <Text note style={Styles.subtitle}>Will not compute stationary time</Text>
                                    </Body>
                                </Left>
                                <Right>
                                    <Switch value={this.state.smartTrack} onValueChange={this.onSmartTrack} />
                                </Right>
                            </ListItem>



                            <ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('About')}>
                                <Left>
                                    <Body>
                                        <Text style={Styles.listTitle}>Store</Text>
                                    </Body>
                                </Left>
                                <Right>
                                    <Icon name="arrow-forward" />
                                </Right>
                            </ListItem>

                            <ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('About')}>
                                <Left>
                                    <Body>
                                        <Text style={Styles.listTitle}>About</Text>
                                    </Body>
                                </Left>
                                <Right>
                                    <Icon name="arrow-forward" />
                                </Right>
                            </ListItem>

                            <ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('Suggest')}>
                                <Left>
                                    <Body>
                                        <Text style={Styles.listTitle}>Suggestions / Contact</Text>
                                    </Body>
                                </Left>
                                <Right>
                                    <Icon name="arrow-forward" />
                                </Right>
                            </ListItem>

                            <ListItem style={Styles.listItem} titleStyle={Styles.title} onPress={() => this.props.navigation.navigate('Reset')}>
                                <Left>
                                    <Body>
                                        <Text style={Styles.listTitle}>Reset all data</Text>
                                    </Body>
                                </Left>
                                <Right>
                                    <Icon name="arrow-forward" />
                                </Right>
                            </ListItem>


                        </List>
                    </Content>
                </ScrollView>
            </Container>

    );
    }
}

Answer 1

主题中有一些变量，您需要更改这些变量才能删除左白条。

本地基础 ListItem 主题由listBtnUnderlayColor: '#DDD'组成，该主题为 List 下的参考项提供了可触摸的交互颜色>

因此，您需要将ListItem弹出组件here中的marginLeft替换为paddingLeft

paddingLeft: variables.listItemPadding + 6

Answer 2

从文档中检查ListItem Selected和ListItem NoIndent并列出组件theme variables

反应本地本地基本ListItem touchableHighlightStyle

2 个答案: