最简单的方法来反应原生

我看到，如果我在例如中设置了fontFamily，那么内部元素不会继承它的属性。它是否存在可反应原生样式的级联概念？我如何完成它？最简单的方法来反应原生

2016-12-23 R01010010

RN级联样式子你，如果你使用的样式属性，你可以阅读更多关于它在这里 - https://facebook.github.io/react-native/docs/style.html –

@MattAft是的，它说'一个常见的模式是让你的组件接受一个样式道具，而这个样式道具反过来用于样式子组件。你可以用它来使CSS样式“级联”。但我不确切地知道这是什么意思。 – R01010010

我编辑了我的答案，以向你展示... – Maxwelll

将样式传递为在CSS中复制级联的道具。所有子组件都可以继承style支柱来实现此目的。它想实现：

const styles = StyleSheet.create({ 
    instructions: { 
     fontSize: 16, 
     textAlign: 'center', 
     margin: 15, 
    }, 
    }); 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.instructions}> 
     <ChildComponent 
      cascadingStyle={styles} 
     /> 
     </View> 
    ); 
    }

这里是我创建演示rnplay.org/apps/dErxuQ

来源

2016-12-23 21:22:58 Maxwelll

对不起，怎么样？这仍然会迫使我在子组件中设置'style = {this.prop.class}'？原因正是我想要避免的 – R01010010

你为什么试图避免这种情况？它是实现在CSS中发现的级联效应的最简单方式，并且非常易于使用 – Maxwelll

我想避免在子项中使用，就像在html中使用css一样。我将fontFamily设置为父项，并且子项自动继承它。这很简单。 – R01010010

-1

下面是一个例子为例，父组件将级联它的风格给孩子们。因此，所有的文本将是红色的字体在这里：

render() { 
    return (
    <View style={styles.red}> 
     <Text>just red</Text> 
     <Text>just</Text> 
     <Text>red</Text> 
     <Text>red</Text> 
    </View> 
); 
} 
} 

const styles = StyleSheet.create({ 
red: { 
color: 'red', 
}, 
});

来源

2016-12-23 21:35:19

显然，在这一刻组件只能继承父的属性只如果父是同类型的，或者至少也支持属性继承。我在主要的View组件中设置了fontFamily，并没有在Text儿童中继承。

来源

2016-12-23 21:59:30 R01010010

我发现避免重复样式道具的最简单方法是封装在一个组件中。例如：

const Item = ({ text }) => <Text style={{ padding: 10 }}>{text}</Text> 

const Consumer =() => 
    <View> 
    <Item text="Item 1" /> 
    <Item text="Item 2" /> 
    <Item text="Item 3" /> 
    </View>

来源

2017-08-03 01:04:40

最简单的方法来反应原生

回答

相关问题