스타일에서 사용할 수있는 변수를 설정하는 방법

B. 마.

나는 그 소품에 따라 두 가지 색상을 사용합니다 기본 구성 요소를 반응 데. 내가 스타일 시트에서 그 변수를 액세스하려는 때문에, 나는 상태에서 외부 클래스의 선언, 그리고. 우선은 파란색으로 선언하고 생성자에서 나는 녹색의 값을 변경합니다. 그러나 사용하는 텍스트는 파란색 남아있다. 나는 그것이 렌더링 함께 할 수있는 뭔가가 알고 있지만, 나는 라이프 사이클의 첫 번째 클래스 생성자에서 값을 변경하기 때문에, 작동 거라 생각 했어요.

그래서이에 대한 해결책이 아닌 JSX 스타일 태그 기능을 사용 하시겠습니까?

let mainColor = Colors.blue1;

export default class Article extends Component {

    constructor(props) {
        super(props);
        mainColor = Colors.green;
        this.state={
            liked: false,
            withHeroImage: false
        }
    }


    render() {
        return (

           <Text style={styles.title}>Lorem ipsum</Text>
        );
    }
}

const styles = StyleSheet.create({
    title:{
        fontSize: 20,
        color: mainColor,
        fontFamily: FontFamily.PoppinsSemibold,
        marginBottom: 20
    }
})

마이크 M :

난 당신이 만든 후 스타일 시트를 수정할 수 있다고 생각하지 않습니다 당신이 그렇게하려고하는 이유는 분명하지 않다.

당신의 예에서, 당신은 단지에 동적 속성을 추가 할 수 Text같이 태그 :

<Text style={[styles.title, {color:mainColor}]}>Lorem ipsum</Text>