Question

我有以下组件：

class Dashboard extends Component {

    render() {


            return (

                <Text>MAIN DASHBOARD</Text>

            );

        };


}

我宣称：

 <View style={styles.dashboard}><Dashboard/></View>

当我宣布我的风格时：

dashboard: {

    flex:3

},

现在，假设我希望能够以不同的方式设置不同的子组件，例如让我的Dashboard组件返回两个视图：

<View class="a"><Text>View A</Text>
<View class="b"><Text>View B</Text>

我想要实现的是css相当于：

Dashboard>View.a - {/*props of views with class 'a' which are children of a dashboard element/*}
Dashboard>View.b - {/* Same but for class b /*}

有没有办法实现这个目标？

Answer 1

React Native样式系统实际上没有类和级联样式的概念，如您的示例所示。如果您控制所有子组件，则只需将任意样式对象传递给父Dashboard组件，然后将其传递给子组件：

<Dashboard aStyle={{}} bStyle={{}} />

在您的信息中心视图中：

return (
  <View>
    <AView style={this.props.aStyle} />
    <BView style={this.props.bStyle} />
  </View>
)

为了获得更灵活的主题支持，您还可以使用styled-components库，它允许您为应用程序的某个子树指定Theme，然后在任何一个子树中使用这些主题值。孩子。

但是，对于您的用例而言，这可能有点过分，您可以使用更简单的解决方案。

为子组件反应本机指定样式

1 个答案: