在NativeBase中，如何避免组件的内联样式道具并单独编写然后传递它

Question

我只是想写一个干净的代码，避免在同一个标签中出现很多东西。例如：Text 和 Box 组件可能有很多样式道具，那么有什么办法可以单独编写它们并将其作为整个对象作为样式传递。

import { Box, extendTheme, NativeBaseProvider, Progress, Text, View } from 'native-base'
import React, { FC } from 'react'

const TrainingList: FC = () => {
    return (
        <NativeBaseProvider>
            <Box my="2">
                <Text fontSize="16" lineHeight="21.8" bold> Annual Training </Text>
                <View my="2" >
                    <Text fontSize="14" lineHeight="19.8"> Due in 2 days (01/12/22) </Text>
                    <Text fontSize="14" lineHeight="19.8"> 50% complete / 10 hrs left </Text>
                </View>
                <Progress rounded="12" colorScheme="warning" bg="#D7D7D7" size="sm" value={65} mx={0} />
            </Box>
            <Box mt="5">
                This is Box2
            </Box>
        </NativeBaseProvider>
    )
}

export default TrainingList

Answer 1

是的，使用样式化组件是可能的。您可以在样式中接受道具。或者，我更喜欢使用样式表，因为它更简单并且仍能保持代码整洁。例如：

<Box style={styles.boxMain}>
<Text style={styles.textOneStyle}> Annual Training </Text>
<View my="2">
<Text style={styles.textTwoStyle}> Due in 2 days (01/12/22) </Text>
<Text style={styles.textTwoStyle}> 50% complete / 10 hrs left </Text>
</View>
</Box>
 );
};

const styles = StyleSheet.create({
textOneStyle: {
fontSize: 16,
lineHeight: 21.8,
fontWeight: "bold"
},
textTwoStyle: {
fontSize: 14,
lineHeight: 19.8,
},
 });

Answer 2

您可以使用 StyleSheet。您可以使用您在组件样式下定义的内容。

import React from "react";
    import { StyleSheet, Text, View } from "react-native";
    
    const App = () => (
      <View style={styles.container}>
        <Text style={styles.title}>React Native</Text>
      </View>
    );
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 24,
        backgroundColor: "#eaeaea"
      },
      title: {
        marginTop: 16,
        paddingVertical: 8,
        borderWidth: 4,
        borderColor: "#20232a",
        borderRadius: 6,
        backgroundColor: "#61dafb",
        color: "#20232a",
        textAlign: "center",
        fontSize: 30,
        fontWeight: "bold"
      }
    });
    
    export default App;

Answer 3

在我看来，最好的方法是向 NativeBase 文本和框组件添加变体。它会保留您的代码，但您也可以在整个代码库中共享一致的风格。

如果你想知道怎么做？我正在分享一些可供关注的资源。

资源：

Official Docs: 第一名。
Snack：展示如何添加变体的演示小吃。
Blog: 更好地理解如何有效地自定义 NativeBase 组件。

在NativeBase中，如何避免组件的内联样式道具并单独编写然后传递它

In NativeBase, how can I avoid inline styling props of component and write it separately and then pass it

reactjs

react-native

react-native-flatlist

native-base

chakra-ui