React Native 将样式作为道具发送到组件

Question

我是学习React Native 的新手，我想构建一个具有良好界面外观的（ReactNaive 和 Expo）应用程序，我如何构建一个组件并将 style{backgroundColor} 作为道具发送然后在主页上渲染组件

home.js

    import React from 'react'
    import { View, Text , Image , ScrollView} from 'react-native';
    import { FlatList } from 'react-native-gesture-handler';
    import { COLORS, SIZES,FONTS} from '../styles/theme.js';
    import Category from '../components/Category.js';
    import CategorySlider from '../components/CategorySlider'
    
     const Home = () => {
         function renderHeader(){
             return(
            <View
             style = {{
            flexDirection: 'row' ,
            marginTop: 40,
            marginBottom: 10,
            paddingHorizontal:SIZES.padding,
            alignItems : 'center'
    
             }}
             >
             <View style={{flex:1}}>
              <Text >Hello , Wafa</Text>
             </View>
             {/* Nonfiction Button */}
         </View>
             )}
    
        return (
            <View 
            style ={{
                flex: 1,
                backgroundColor: COLORS.white
            }}
            >
                
                {/* HEADER */}
                {renderHeader()}
    
                {/* Content */}
               <View style={{height:130 , marginTop:SIZES.margin}}>
             <ScrollView 
              horizontal={true}
              showsHorizontalScrollIndicator={false}
              >
                <Category name='Balance'  />
                <Category name='Saving' style={COLORS.green} />
                <Category name='Income' style={ COLORS.brown } />
                <Category name='Loans' style={ COLORS.pink}/>
                <Category name='Saving' style={ COLORS.pink}/>
                <Category name='Saving' style={ COLORS.pink}/>
             </ScrollView>
               </View>
              
                <CategorySlider/>
            
            </View>
        )
    }
    
    export default Home;

这是我要在home.js上渲染的组件

Category.js

    import React, { PureComponent } from 'react'
    import { Text, View ,StyleSheet ,Image } from 'react-native'
    import { backgroundColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
    import { COLORS, SIZES,FONTS} from '../styles/theme.js';
    
    export default class Category extends PureComponent {
        render() {
            return (
                <View style={{marginLeft: SIZES.margin ,marginRight: SIZES.margin}}>
                    <View>
                 <View style={{ 
                 height: 60,
                 width: 60,
                 backgroundColor:COLORS.pink,
                 borderRadius: SIZES.radius,
                 }}>
                  <View />
                   <View>
                    <Image />
                   </View>
                 </View>
                 <Text 
                 style={{textAlign:'center'}}
                 >
                 {this.props.name}</Text>
               </View>
                </View>
            )
        }
    }

我还制作了 File for Design 系统包含我将在应用程序上重复的样式。

theme.js：

    import { Dimensions } from "react-native";
    import { useFonts } from 'expo-font';
    const { width, height } = Dimensions.get("window");
    
    
    export const COLORS = {
        green: "#68AB9F",
        brown: "#c18e62",
        pink: "#d99e96" ,
        gray: "#383e42",
        white: "#f5f7fc",
    
    }

Answer 1

在这里，您正在使用基于功能的组件 (home.js) 和基于类的 (Category.js) 组件。标准是，如果首先将您的 Category 组件转换为具有功能的组件，那么您可以将该道具保存到您的 Category 组件中，例如：

import React, { useState } from 'react'
import { Text, View ,StyleSheet ,Image } from 'react-native'
import { backgroundColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
import { COLORS, SIZES,FONTS} from '../styles/theme.js';

const Category = (props) => {
      const [backgroundColor, setBackgroundColor] = useState(props.style || null);  //store your prop in state like this
      const [name, setName] = useState(props.name || null);

        return (
            <View style={{marginLeft: SIZES.margin ,marginRight: SIZES.margin}}>
                <View>
             <View style={{ 
             height: 60,
             width: 60,
             backgroundColor: backgroundColor,
             borderRadius: SIZES.radius,
             }}>
              <View />
               <View>
                <Image />
               </View>
             </View>
             <Text 
             style={{textAlign:'center'}}
             >
             {name}</Text>
           </View>
            </View>
        )
}

export default Category;

希望这对你有用。

Answer 2

在您的父组件中，将您的样式对象放入子组件的包装中，即

function Parent(){
   return (
      <Child cssdata={{backgroundColor:'red',marginLeft:8}}/>
   )
}

并在您的子组件中从道具中获取此数据并应用于它

function Child(props){
   return (
     <View style={props.cssdata}></View>
   )
}