react-native - 如何覆盖 NativeBase 中的样式？

Question

在 NativeBase Docs 中提到的每个代码示例中，没有使用 React StyleSheet。
我没有找到覆盖 NativeBase 样式的方法。
如何将 React StyleSheet 包含到我的应用程序中？

Answer 1

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 ，您可以简单地引用它添加您的组件可能需要的任何样式。