如何在样式中显示视图(使用样式组件)视图 - 反应本机

Question

我正在学习反应本地和样式的组件。我正在开发一个简单的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）但是出于某种原因，View S和Text S嵌套在StyledView中。

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

Answer 1

您有几个问题。

1. 样式的组件不接受其中的字符串，所以您不能从道具发送了" 10px"。
2. 你是正确的填充最后需要PX。仅填充的东西不起作用，但是您可以通过添加Paddingvertical和paddinghorizontal具有与填充相同的值相同的值。
3. 您无需通过样式道具，您可以在样式中定义所有道具成分。这样：

从"样式组件/本机"

中导入

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或更多道具。另外，这只是个人。我仅对可能在运行时更改或依赖主题的样式组件，例如for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for the对于其余的具有永不改变的恒定样式的人，我只使用普通样式的对象，因为它的冗长较小。

如果这是一个简化的版本，并且您绝对需要提供的道具，则将它们全部移至一个主题对象中，并用theaseprovider传递它，然后将其读为$ {props.theme.backgroundcolor}或其他东西。

欢呼