React native react本机基ListItem touchableHighlightStyle
您知道如何更改ListItem的触摸样式吗？ “建议/联系”突出显示，触摸时为灰色React native react本机基ListItem touchableHighlightStyle,react-native,native-base,React Native,Native Base,您知道如何更改ListItem的触摸样式吗？ “建议/联系”突出显示，触摸时为灰色 主题中有一些变量，您需要更改这些变量才能删除左侧的白色条 本机基础ListItem主题包括为列表下的参考底图项目提供可触摸交互的颜色 因此，您需要将ListItem弹出组件中的marginLeft替换为paddingLeft 检查并列出文档中的组件是否可以将代码添加到生成问题的组件中？很抱歉，忘记了。添加了组件和样式。（这是在弹出主题后发生的） import React, { Component } from
主题中有一些变量，您需要更改这些变量才能删除左侧的白色条 本机基础ListItem主题包括为列表下的参考底图项目提供可触摸交互的颜色 因此，您需要将ListItem弹出组件中的
marginLeftpaddingLeft检查并列出文档中的组件是否可以将代码添加到生成问题的组件中？很抱歉，忘记了。添加了组件和样式。（这是在弹出主题后发生的）
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>
);
}
}
import { StyleSheet, Dimensions } from 'react-native';
import Colours from '../models/Colours';
const MARGIN = 20;
const h = Dimensions.get("window").height;
const w = Dimensions.get("window").width;
const pageH = h - 65 - 50 - 5; // header, tabs, safe
const Styles = StyleSheet.create({
dark: {
backgroundColor: Colours.DARK
},
black: {
backgroundColor: Colours.BLACk
},
page: {
//flex: 1,
//flexDirection: 'row'.
backgroundColor: Colours.DARK
},
centerContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
fullPage: {
flex: 1,
justifyContent: "center",
alignItems: "center",
height: pageH
},
modalBG: {
position: 'absolute',
top: 0,
left: 0,
flex: 1,
width: w,
height: h,
justifyContent: "center",
alignItems: "center",
backgroundColor: Colours.RGBA_BLACK
},
centerBlackMargin: {
flex: 1,
justifyContent: "center",
alignItems: "center",
margin: 1,
backgroundColor: Colours.RGBA_BLACK
},
list: {
borderColor: Colours.DARK
},
listTitle: {
color: Colours.WHITE,
fontSize: 16
},
listItem: {
backgroundColor: Colours.DARK,
borderColor: Colours.DARKER,
borderBottomWidth: 1,
height: 60
//borderBottomColor: '#bbb',
//borderTopWidth: 0,
//borderBottomWidth: 0
//StyleSheet.hairlineWidth,
},
listItemPress: {
borderColor: Colours.DARKER
},
input: {
color: Colours.GREY
//height: 60
//borderBottomColor: '#bbb',
//borderTopWidth: 0,
//borderBottomWidth: 0
//StyleSheet.hairlineWidth,
},
textarea: {
color: Colours.GREY,
fontSize: 18,
marginLeft: 14,
marginTop: 15,
paddingLeft: 0,
paddingRight: 15,
borderColor: 'transparent',
borderBottomWidth: 1,
borderBottomColor: Colours.DARKER
},
listItemContainer: {
backgroundColor: Colours.DARK
},
listCols: {
flex: 1,
flexDirection: 'row',
paddingLeft: 10
},
subtitle: {
color: Colours.DARKGREY,
backgroundColor: Colours.DARK,
fontSize: 12
},
title: {
color: Colours.WHITE,
fontSize: 18
},
headerTitle: {
fontSize: 24,
color: Colours.WHITE
},
headerSide:{
flex: 0,
flexBasis: 48
},
headerBody:{
flex: 1,
},
bigTitle: {
fontSize: 48,
color: Colours.WHITE
},
midTitle: {
fontSize: 36,
color: Colours.WHITE
},
smallTitle: {
fontSize: 12,
color: Colours.DARKGREY
},
checkbox: {
marginRight: MARGIN
},
// input: {
// width: 200,
// height: 40,
// fontSize: 24,
// backgroundColor: Colours.RED
// },
sendButton: {
marginTop: 25,
paddingRight: 15,
paddingLeft: 15,
},
sidePadding: {
paddingRight: MARGIN,
paddingLeft: MARGIN,
},
trackFooter: {
paddingTop: MARGIN,
paddingRight: MARGIN,
paddingLeft: MARGIN,
},
button: {
color: Colours.WHITE,
fontSize: 18,
backgroundColor: Colours.RED
},
cancelTrack: {
color: Colours.GREY,
textAlign: 'center',
padding: 10
},
textWarn: {
color: Colours.RED,
textAlign: 'center',
marginTop: 5
},
textCenter: {
color: Colours.GREY,
textAlign: 'center',
marginTop: 10,
//fontSize: 21
},
icon: {
color: Colours.GREY
},
bgRed: {
backgroundColor: Colours.RED
},
bgBlue: {
backgroundColor: Colours.BLUE
},
bgYellow: {
backgroundColor: Colours.YELLOW
},
dashNotEnough: {
textAlign: 'center',
fontSize: 21,
color: Colours.DARKGREY
},
dashFooter: {
height:150,
flex: 1,
justifyContent: "center",
alignItems: "center",
//backgroundColor: Colours.YELLOW
},
centeredScreen: {
flex: 1,
justifyContent: "center",
alignItems: "center",
//backgroundColor: Colours.YELLOW
},
centeredScreenCol: {
flex: 1,
flexDirection: 'column',
justifyContent: "center",
alignItems: "center",
//backgroundColor: Colours.BLUE
}
});
export default Styles;
paddingLeft: variables.listItemPadding + 6