Question

我正在学习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）但由于某些原因，嵌套在View中的Text和StyledView无法显示。

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

Answer 1

您有几个问题。

样式化的组件不接受其中的字符串，因此您不能从道具发送了“ 10px”
您是正确的填充最后需要一个px。单单填充不起作用，但是您可以通过添加paddingVertical和 paddingHorizontal具有与padding相同的值。
您不必要使实现复杂化通过样式道具，您可以在样式中定义它们零件。像这样：

从“样式化的组件/本机”中导入样式的导入

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}之类的东西。

欢呼

如何在样式化的视图（使用样式化组件）中显示View-React Native

1 个答案: