Nativebase - настроить компонент

Я просто хочу изменить цвет линии между каждым ListItem в List на красный. Думаю, мне нужно создать собственную тему, чтобы перезаписать ListItem по умолчанию.

Пытающийся:

import getTheme from '../../../native-base-theme/components'
import listItemTheme from '../../../native-base-theme/components/ListItem'

import {
  List,
  ListItem,
  Text,
  Left,
  Body,
  Right,
  Button,
  Container,
  Header,
  Title,
  Content,
  StyleProvider
} from 'native-base'

const styles1 = {
  'yourTheme.CustomComponent': {
    borderColor: 'red', 
    borderBottomWidth: 1
  }
}

Categories = connect(
  mapStateToProps,
  mapDispatchToProps
)(Categories)

export default connectStyle('yourTheme.CustomComponent', styles1)(Categories)

каждый ListItem:

const renderCategoryRow = (props, item) => {


  return (
    <StyleProvider style={styles1}>
    <ListItem
      style={{
        ...styles.labelHeight
      }}
      icon
      onPress={() => props.toggleShowSubcategories(item)}>

      <Left>
        <Icon
          style={styles.icon}
          name={item.icon}
          size={20}
          color={item.iconColor} />
      </Left>
      <Body style={{...styles.labelHeight

      }}>
        <Text style={{
          ...styles.label,
          color: '#7c6a4d'
        }}>{item.label}</Text>
      </Body>
      <Right style={styles.labelHeight}>
        <Eicon style={styles.arrow} name="chevron-right" size={30} />
      </Right>
    </ListItem>
      </StyleProvider>
  )
}

Получение ошибки:

undefined не является объектом (оценка 'переменные / listBtnUnderlayColor')


react-native react-native-ios javascript react-native-android native-base
person BeniaminoBaggins    schedule 29.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я исправил ошибку, используя пустой getTheme() в <StyleProvider>:

const renderCategoryRow = (props, item) => {
  const styles1 = props.style;
  return (

<StyleProvider style={getTheme()}>
<ListItem

  style={{
    ...styles1

  }}
  icon
  onPress={() => props.toggleShowSubcategories(item)}>

Затем я отредактировал фактический components/ListItem.js файл темы, в результате чего любой <ListItem> в <StyleProvider> принял эти изменения в ListItem.js файле.

Затем сделал эту одноразовую кастомную тему, чтобы сделать ее счастливой при использовании connectStyle():

// Define your own Custom theme
const customTheme = {
//backgroundColor: 'black'
height: 55,
borderBottomColor: 'red'

  }


export default connectStyle('customTheme', customTheme)(Categories)

... и это сработало.

person BeniaminoBaggins    schedule 29.07.2017