如何在样式（使用样式组件）视图中显示视图 - React Native答案

【问题标题】：How to show View within styled (using styled-components) View - React Native如何在样式（使用样式组件）视图中显示视图 - React Native
【发布时间】：2019-07-31 13:46:32
【问题描述】：

我正在学习 React Native 和样式化组件。我正在开发一个简单的 iOS 应用程序，但遇到了styled-components 的一些问题。

我要做什么

我试图在点击时显示modal，看起来像这样

<Modal visible={this.state.isModalVisible} animationType={'fade'}>
    <StyledView flex={1} padding={10} backgroundColor={'orange'}>
        <View>
            ...more Views and Texts
        </View>
    </StyledView>
</Modal>

StyledView 是我使用styled-components 创建的自定义视图，如下所示

const ViewWrapper = styled.View`
  flex: ${props => props.flex};
  padding: ${props => props.padding};
  backgroundColor: ${props => props.backgroundColor};
`;

const StyledView = ({ flex, padding, backgroundColor }) => (
  <ViewWrapper
    flex={flex}
    padding={padding}
    backgroundColor={backgroundColor}
  />
);

export default StyledView;

我遇到的问题

1) 当我设置padding={10} 时，我得到一个错误Failed to parse declaration "padding: 10"。

2) 谷歌搜索了一下后，我发现我应该使用padding={'10px'}，它会抛出这个错误，10px is of type NSString cannot be converted to YGValue. Did you forget the % or pt suffix?。

（padding={'10%'} 工作正常）

然后我只是尝试在 ViewWrapper 中设置 flex 和 padding 值，并且只发送背景颜色为 prop。

3) 但由于某种原因，嵌套在StyledView 中的Views 和Texts 没有显示出来。

请告诉我为什么它不起作用，并帮助我了解我在这里缺少什么。谢谢。

【问题讨论】：

标签： react-native styled-components

【解决方案1】：

您有几个问题。

样式化组件不接受其中的字符串，因此您不能从道具发送'10px'。
你是正确的填充最后需要一个 px 。单独的填充是行不通的，但是您可以通过添加 paddingVertical 和 paddingHorizontal 具有与填充相同的值。
您的实现过于复杂，因为您不需要传递样式道具，您可以在样式中定义它们零件。像这样：

从“styled-components/native”导入样式

const StyledView = styled.View`
   flex: 1;
   padding: 10px;
   backgroundColor: orange
`;

然后你就这样使用它：

<Modal visible={this.state.isModalVisible} animationType={'fade'}>
    <StyledView>
        <View>
            ...more Views and Texts
        </View>
    </StyledView>
</Modal>

不需要 ViewWrapper 或更多道具。此外，这只是个人的。我只将 StyledComponents 用于可能在运行时更改或依赖于主题的组件，例如 fontFamily 或 fontSize 的 exts。对于其余样式不变且永不改变的部分，我只使用普通样式对象，因为它不那么冗长。

如果这是一个简化版本，并且您绝对需要将它们全部转换为一个主题对象并使用 ThemeProvider 传递的道具，然后将其读取为 ${props.theme.backgroundColor} 或其他内容。

干杯

【讨论】：