有没有办法从 React Native 的子组件更改父组件上文本元素的文本颜色？

Question

有没有办法改变父组件上子组件上文本元素的文本颜色[=20] =]React Native?

我在下面的代码中用图标做了，我可以用文字做吗？

发现更多 父组件

import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';

import Colors from '@miniclementine:common/appearance/Colors';
import ClementineIcon from '@miniclementine:common/components/ClementineIcon';

export default function DiscoverMore({title, onPress, color}) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.btnContainerStyle}>
        <ClementineIcon name="add-circle-bold" color={color} size={24} />
        <Text style={styles.btnTextStyle}> {title} </Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
    btnContainerStyle: {
        paddingVertical: 16,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
      },
      btnTextStyle: {
        color: Colors.cornflower,
        fontSize: 16,
        textAlign: 'center',
      }
});

HomePage引入DiscoverMore组件并使用道具改变图标颜色

export default function SessionHomepage({navigation, passData, onPress}) {
  const onPressSectionHeader = ({onPress}) => {
    navigation.navigate(SESSIONS_LIST_PAGE, passData)
    // @TODO: navigate to a page using navigation.navigate(pageName, params);
  };

  const onPressSectionHeaderInvalid = () => {
    alert('Out of scope for this task')
    // @TODO: navigate to a page using navigation.navigate(pageName, params);
  };

  const onContactPress = () => {
    Linking.openURL('mailto:alina@clementineapp.co.uk?subject=SendMail&body=Description') 
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
      <View style={styles.content}>
        <SectionHeader
          title="Morning Sessions"
          onPress={onPressSectionHeaderInvalid}
        />
        <DiscoverMore 
          title="Discover more sessions" 
          onPress={onPressSectionHeaderInvalid}
          color={Colors.cornflower}
        />
        <SectionHeader
          title="Pick-me-ups"
          onPress={onPressSectionHeader}
        />
        <DiscoverMore 
          title="Discover more sessions" 
          onPress={onPressSectionHeader}
          color={Colors.cornflower}
        />
      </View>
      <View style={styles.sleepSection}>
        <Image
          source={require('../../assets/illustrations/sleep_section.png')}
          style={{height: 250, width: '100%'}}
        />
      </View>
      <View style={styles.content}>
      <View style={styles.sleepSection}>
      <SectionHeader
          title="Sleep Sessions"
          onPress={onPressSectionHeaderInvalid}
        />
        <Text>test</Text>
        <DiscoverMore 
          title="Discover more sessions" 
          onPress={onPressSectionHeaderInvalid}
          color={Colors.powderBlue}
        />
      </View>
      
      </View>
      
      <BlueButton title="Leave us feedback" onPress={onContactPress}/>
      </ScrollView>
    </SafeAreaView>
  );
}

Answer 1

试试这个方法

发现页面

export default function DiscoverMore({title, onPress, color, textColor}) {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.btnContainerStyle}>
        <ClementineIcon name="add-circle-bold" color={color} size={24} />
        <Text style={[styles.btnTextStyle,{color: textColor}]}> {title} </Text>
      </View>
    </TouchableOpacity>
  );
}

首页

<DiscoverMore 
          title="Discover more sessions" 
          onPress={onPressSectionHeaderInvalid}
          color={Colors.cornflower}
      textColor={Colors.cornflower} // add text color here
        />

有没有办法从 React Native 的子组件更改父组件上文本元素的文本颜色？

Is there a way to change text colour of a text element on a parent component from the child component in React Native?

javascript

parent-child

reactjs

react-native

react-props