Question

我的容器类：

import React from 'react';
import {View} from 'react-native';

const Cont = (props) => {

    return(
        <View style={styles.cStyle}>
            {props.children} 
        </View>

    );
};

const styles =  {
    cStyle: {
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#fff',
        borderBottomWidth: 0,
        elevation: 10,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10
    }
};

export default Cont;

现在使用该组件的类：

import React from 'react';
import {Text} from 'react-native';
import Cont from './Cont';

const Det = (props) => {

    return(
        <Cont>
            <Text>{props.alb.title}</Text>
        </Cont>
    );
};

export default Det;

我认为不需要提供index.js，因为我所做的所有与该主题有关的事情都是调用该对象的自关闭标签。我不知道为什么不应用我的样式。我检查了所有我认为可以检查的内容。有任何想法吗？感谢您的支持。

PS：我期望<Text />个孩子继承我的风格

PS2：另外，我不确定这是否真的是“继承”。因为实际上，样式应该影响我班上的每个<View>，然后影响我<View>标签内的子项

Answer 1

我想回答有关此问题的我自己的问题，因为可能会有其他人现在或将来都在挣扎，并且不知道该怎么做，希望这个回答对他们有帮助。

我的代码没有错误，至少在我上面发布的类中没有。每个<Text>的孩子都应该放在样式<View>中，这是我最初的意图。因此，我在调用js入口文件中的类时做了一个错字。但是，以某种方式（是的，这违背了我目前已经很少的React Native知识），该应用程序仍在编译但没有样式化任何内容。我不仅重启了终端中的服务器，而且还重启了模拟器，才收到最终可以调试的错误。（第X行中的意外char'blabla'）。修复它后，我的样式被应用。但是，最疯狂的事情是：要么是使用意外的字符进行编译（对我来说这似乎是不可能的），要么是编译我的App的旧版本。现在，这听起来对我来说绝对是疯狂的，我将在React Native论坛和Android Studio上进行报告。感谢您的所有帮助。

编辑：关于此问题的React Native论坛主题：http://discuss.nativebase.io/t/android-simulator-compiling-wrong-code/1183

Answer 2

在react-native中，常规样式的行为与CSS（例如，网络浏览器）相比有所不同。 react-native中默认没有样式继承的概念，因此<Cont />的子元素（即您的<Cont />元素）不会继承您应用于<Text>的样式

使用react进行样式设置时，通常需要将样式直接应用于要调整外观的所有组件：

<Cont>
    { /* custom styling must be applied to all components that you 
         want to tweak */ }
    <Text style={{ color : 'red' }}>{props.alb.title}</Text>
</Cont>

还需要记住的一点是，不同的元素类型（<Text/>，<View />等）有时仅支持样式选项的有限子集。例如，see the styling documentation for <Text />概述了<Text />元素类型支持的样式选项。

样式未应用于儿童道具

2 个答案: