在 NativeBase Docs 中提到的每个代码示例中,没有使用 React StyleSheet。
我没有找到覆盖 NativeBase 样式的方法。
如何将 React StyleSheet 包含到我的应用程序中?
最佳答案
NativeBase 使用不同的方法为您的组件添加样式。
它使用 Utility first方法,其中它利用 ReactNative 样式表 API 并添加一层 Utility Props在它的上面。这个想法是将 Prop 传递给您的组件以更改它们的样式,而不是定义一个类名并在单独的样式表中添加样式。
例如,使用 React Native,您可以这样写:
function Example() {
return (
<View style={styles.container}>
{/* content */}
</View>;
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#0891b2',
paddingVertical: 16,
paddingHorizontal: 12,
borderRadius: 5,
alignSelf: 'center',
width: 375,
maxWidth: '100%'
}
});
现在,使用 NativeBase,要实现相同的 View ,您将按如下方式编写:
function Example() {
return (
<NativeBaseProvider>
<Box bg="primary.600" py="4" px="3" rounded="md" width={375} maxWidth="100%">
{/* content */}
</Box>
</NativeBaseProvider>;
);
}
这里,NativeBase已经定义了bg
, py
, px
等作为 Prop 并将它们映射到 backgroundColor
的样式属性, paddingVertical
, paddingHorizontal
等。
提供了这些映射的列表 here ,您可以简单地引用它添加您的组件可能需要的任何样式。
关于react-native - 如何覆盖 NativeBase 中的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38717329/