如何使用样式组件在 React Native 中设置 Text 子元素的样式？

Question

所以如果我有这个

const MyView = styled.View`
    background: green;
    color: red;
`

我有

<MyView>
  <Text> Hello </Text>
</MyView>

文字不是红色的

所以我尝试了

const MyView = styled.View`
    background: green;
    & > Text { color: red; }
`

你可以在 React 中使用普通的样式组件来做到这一点，但是文本仍然不是红色的

我该如何实现这一目标？

我知道我能做到

const StyledText = styled.Text`
    color: red;
`

进而

    <MyView>
      <StyledText> Hello </StyledText>
    </MyView>

但如果可以的话我想避免这种情况。是否可以访问 RN 中的 Text 子元素？

Answer 1

不幸的是，RN 的 styled-components 只是一个包装器，它返回带有 style prop 的通用 RN View（或 Text）<View style={...styles} />。无法在父块中设置子块的样式。