NativeBase:覆盖单个元素的样式

时间:2017-03-31 04:39:33

标签: react-native native-base

我有一个Text组件,我只需要为一个屏幕修改(​​不重新整理整个主题)。我试图遵循NativeBase 2.0 documentation,但发现它非常令人困惑。是否有一种简单的方法可以只更改该元素的样式而无需将整个主题复制到项目中?

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { ListItem, Grid, Col, Text } from 'native-base';

export default class JobListDetail extends Component {
  render() {
    return (
      <ListItem>
        <Grid>
          <Col>
            <Text style={styles.redText}>Some Text</Text>
            <Text>Another text</Text>
          </Col>
        </Grid>
      </ListItem>
    );
  }
}

const styles = StyleSheet.create({
  redText: {
    color: 'red'
  },
});

2 个答案:

答案 0 :(得分:2)

NativeBase Text会覆盖style&#39; StyleSheetPropType成为PropTypes.object

删除StyleSheet.create以应用新样式:

const styles = {
  redText: {
    color: 'red'
  },
};

答案 1 :(得分:0)

应用了样式,但是有一个警告会不断被抛出。

<Text style={labelStyle}>
    {title}
</Text>
const styles = {
    pending: {
        color: '#000'
    },
    complete: {
        textDecorationLine: 'line-through',
        color: '#d8d8d8'
    }
};

这将抛出 enter image description here 此处提交了一个公开的高优先级问题https://github.com/GeekyAnts/NativeBase/issues/610