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

관련 문제