나는 색상 속성이없는이</p> <pre><code><View style={[color: 'red']}> <Text>Text1</Text> <Text>Text2</Text> <Text>Text3</Text> </View> </code></pre> <p>보기 구성 요소처럼 JSX을 정의한 요소

Question

을 텍스트 스타일 네이티브 반응하고 자식 요소의 텍스트 색상 설정을 적용하지 않습니다.

개별 요소에 같은 스타일을 적용하고 싶지 않습니다. 부모의 스타일을 정의하고 HTML의 모든 일반 자식 요소에 적용하려면 어떻게해야합니까?

Answer 1

내가 알고있는 한, Super Componnet에서 스타일을 이어받을 수있는 간단한 방법은 없습니다.

어쩌면 당신이 할 수있는 사용자 지정과 같은 구성 요소 :

class YourComponent extends Component { 
    render() { 
    let children = []; 
    React.Children.forEach(this.props.children, (item, index) => { 
     // textStyle is the style that you want children to inherit 
     children.push(React.cloneElement(item, this.props.textStyle)); 
    }); 

    return (
     <View> 
     { children } 
     </View> 
    ); 
    } 
} 

Answer 2

스타일은 Text 구성 요소 사이에 전파되고, 그래서 당신은 같은 것을 할 수있는 각에 스타일을 적용하는 것보다

<Text style={{color: 'red'}}> 
    <Text>Text1</Text> 
    <Text>Text2</Text> 
    <Text>Text3</Text> 
</Text> 

Answer 3

기타 요소를 개별적으로 사용하면 lodash _.map과 같은 것을 사용할 수 있으며 각 자식을 프로그래밍 방식으로 렌더링하고 스타일을 한 번 선언 할 수 있습니다.

각 텍스트 태그마다 다른 색상을 원했기 때문에이 작업을 수행하려고 했습니까?

코드를 줄이기 위해 "구조화"할 수도 있습니다.

대신.