Nativebase - 自定义一个组件答案

【问题标题】：Nativebase - customise a componentNativebase - 自定义一个组件
【发布时间】：2017-07-29 06:07:28
【问题描述】：

我只想将List 中每个ListItem 之间的线条颜色更改为红色。我想我必须做一个自定义主题来覆盖默认的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)

每个列表项：

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

【问题讨论】：

标签： javascript react-native react-native-android react-native-ios native-base

【解决方案1】：

我通过在<StyleProvider> 中使用空的getTheme() 修复了错误：

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

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

  style={{
    ...styles1

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

然后我编辑了实际的components/ListItem.js 主题文件，这导致<StyleProvider> 中的任何<ListItem> 在ListItem.js 文件中进行这些更改。

然后做了这个一次性的自定义主题，让它在使用connectStyle()时变得快乐：

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

  }


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

...它奏效了。

【讨论】：