0

アプリでカスタマイズを提供するために、私はスタイル用に別のファイルを作成しています。今スタイルシートを継承する方法は?

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

スタイルの影響はありません。

別のクラスのスタイルを適用するにはどうすればよいですか?

答えて

2

Theme.jsファイルにエクスポートコールはありません。あなたのコードは:

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

である必要があります。以下のコードをes6コードとして使用できます。

import Style from "./Theme" 
+0

スタイルの設定方法は? –

+0

あなたの残りのコードはうまくいくようです。 – while1

関連する問題