Question

要在应用程序中提供自定义，我正在为样式创建单独的文件。

如下所示

'uses strict'

import {StyleSheet} from 'react-native'

const Styles = StyleSheet.create({
  welcome_page_style:{
    backgroundColor : 'red'
  },
  welcome_page_indicator_style:{
    backgroundColor : 'grey'
  },
  welcome_page_selected_indicator_style:{
    backgroundColor : 'black'
  },
  welcome_page_content_style : {
    flex : 1,
    justifyContent : 'center',
    alignItems : 'center',
    color : 'black',
    fontSize : 15
  }
}
);

现在从其他课程开始，我继承了上面的风格并使用它如下。

import {StyleSheet, View, Text} from 'react-native';
import React, {Component, PropTypes} from 'react';
import {IndicatorViewPager, PagerDotIndicator} from 'rn-viewpager';
var Styles = require('./Theme')

export default class ViewPagerPage extends Component {
  static propTypes = {
      contentList : PropTypes.arrayOf(PropTypes.string).isRequired
  }

  constructor(props){
    super(props)
  }
    render() {
          return (
            <View style={{flex:1}}>
                <IndicatorViewPager
                    style={{flex:1}}
                    indicator={this._renderDotIndicator()}>
                    <View style={Styles.welcome_page_style}>
                       <Text style={Styles.welcome_page_content_style}>{this.props.contentList[0]}</Text>
                   </View>
                </IndicatorViewPager>
                </View>
              );
    }
    _renderDotIndicator() {
          return <PagerDotIndicator pageCount={this.props.contentList.length} dotStyle={Styles.welcome_page_indicator_style}/>;
      }
    }
module.exports = ViewPagerPage;

没有风格的影响。

如何应用其他课程的风格？

Answer 1

您的Theme.js文件中没有导出调用。你的代码应该是：

export const Styles = StyleSheet.create(....

同样在您的组件文件中。您可以使用以下作为es6代码：

import Style from "./Theme"

如何继承样式表？

1 个答案: