reactjs - 如何更新 React Native 中的组件？

Question

我的问题是我想更改头像的颜色，我使用的是嵌套有堆栈导航器的 DrawNavigation，所以当我单击 DrawNavigation 中的“配置文件”选项时，它会转到配置文件屏幕，在那里我可以看到几个按钮一种不同的颜色，如果我点击一个，头像会根据按钮的颜色改变颜色，但头像的颜色不会改变。

DrawerNavigation 代码的一部分：

import React from "react"
import {View, Text, StyleSheet, TouchableOpacity, Image} from "react-native"
import {DrawerContentScrollView, DrawerItemList} from "@react-navigation/drawer"
import AvatarC from "../components/AvatarC"

export default function UserContent({...props}){
    return(
        
        <DrawerContentScrollView {...props}  >
            
            <View style={styles.datUser}>
                <AvatarC size={60} color={'blue'}/>
                <View style={styles.Name}> 
                    <Title style={styles.Title} >Ryan Campbell</Title>
                    <Caption>[e-mail]</Caption>
                </View>
            </View>
            <DrawerItemList {...props} />
        </DrawerContentScrollView>
    )
   }

配置文件代码的一部分：

import React, {useState} from "react"
import {View, Text, TouchableOpacity, StyleSheet, ScrollView,Dimensions, Image} from "react-native"
import {Avatar, DefaultTheme, } from "react-native-paper"
import AvatarC from "../components/AvatarC"



export default function Perfil(){
    const[color, setColor] = useState('blue')
    const changeColor = (newColor) =>{
        setColor(newColor)
    }
    return(
        <View style={{height:(screenHeight-200), flex:1}}>
            <ScrollView  showsVerticalScrollIndicator={false} style={styles.viewBody} contentContainerStyle={{flexGrow:1}}>
                <View style={{ flex:1}}>
                    <AvatarC size={60} color={color}/>
                    <Text style={styles.changeColor}>
                        Change Color Profile:
                    </Text>
                    <View style={styles.viewColors}>
                    
                        <TouchableOpacity  onPress={()=>changeColor('red')} style={{...styles.bnColor, backgroundColor:"red"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('green')} style={{...styles.bnColor, backgroundColor:"green"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('yellow')} style={{...styles.bnColor, backgroundColor:"yellow"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('blue')} style={{...styles.bnColor, backgroundColor:"blue"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('pink')} style={{...styles.bnColor, backgroundColor:"pink"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('purple')} style={{...styles.bnColor, backgroundColor:"purple"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('orange')} style={{...styles.bnColor, backgroundColor:"orange"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('brown')} style={{...styles.bnColor, backgroundColor:"brown"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('black')} style={{...styles.bnColor, backgroundColor:"black"}}></TouchableOpacity>
                        <TouchableOpacity  onPress={()=>changeColor('#001269')} style={{...styles.bnColor, backgroundColor:"#001269"}}></TouchableOpacity>
                        
                    </View

                </View>
            </ScrollView>
        </View>
    );
}

组件代码：

import React, {useState, useEffect} from "react"
import {Avatar, DefaultTheme, } from "react-native-paper"

export default function AvatarC(props){
    const[color, setColor] = useState('blue')

    useEffect( () => {
        changeC()
    }, [props.color])
    const colorP = props.color
    
    var theme = {
        
        ...DefaultTheme,
        roundness: 2,
        colors: {
        ...DefaultTheme.colors,
        primary: color,
        },
    };
    const changeC =()=>{
        setColor(props.color)
    }
    return(
        <Avatar.Text

            size={props.size}
            label={"RC"}
            theme={theme}
        />
    )

}

标签： reactjsreact-nativereact-navigation

Answer 1

我认为你必须只关注组件中的道具

import {Avatar, DefaultTheme} from "react-native-paper"

export default function AvatarC(props){

var theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
      primary: props.color,
    },
};

return(
    <Avatar.Text
        size={props.size}
        label={"RC"}
        theme={theme}
    />
)}