javascript - 我想从 B.js - React Native 切换我在 A.js 中使用的卡片组件的可见性

Question

我正在尝试制作一个设置屏幕（B.js），用户可以在其中关闭和打开他们想要在跟踪屏幕上看到或不想看到的卡片。这些卡片也被分成不同的 JS 文件，并全部导入到 TrackScreen.js (A.js) 中进行导航。

如何从 Settings.js 文件切换 TrackScreen.js 中这些卡片的可见性？

设置.js

export default class Settings extends React.Component {
constructor() {
    super();
    this.state = {
        show: true,
    };
}
ShowHideComponent = () => {
    if (this.state.show == true) {
        this.setState({ show: false });
    } else {
        this.setState({ show: true });
    }
};
render() {
    return (
        <Layout style={styles.mainContainer}>

            <TopNavigation position="absolute"
                top={0}
                style={{ height: hp('14%'), width: width }} />
            <Text style={{ top: hp('2%'), left: wp('-30'), fontSize: wp('7.5%'), fontWeight: '700' }}>Settings</Text>
            <Button
                style={{ left: wp('40%'), top: wp('3'), height: hp('5%') }}
                appearance="outline"
                onPress={() => this.props.navigation.navigate("Settings")}> Done</Button>
            <Divider />
            <Card style={styles.cardContainer}>
                {this.state.show ? (
                  ***I want to hide the PainCard (and other cards) I have used in TrackScreen.js***
                ) : null}

                <Button onPress={this.ShowHideComponent} > Hide/Show</Button>
            </Card>


        </Layout>
    );
};

}

这些卡片在 TrackScreen.js 中：

import React from "react";
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
import MedicationCard from "./TrackingCards/MedicationCard";
import PainCard from "./TrackingCards/PainCard";
import MoodCard from "./TrackingCards/MoodCard";
import BloodCard from "./TrackingCards/BloodCard";
import DigestionCard from "./TrackingCards/DigestionCard";
import ExerciseCard from "./TrackingCards/ExerciseCard";
import SaveCard from "./TrackingCards/SaveCard";
import DietCard from "./TrackingCards/DietCard";
import SexCard from "./TrackingCards/SexCard";
import { TrackingStyles } from "./TrackingStyles";
import { HomeStyles } from "./HomeStyles";
import { Divider, Layout, TopNavigation, Button } from "@ui-kitten/components";
import { ScrollView, Dimensions, Image, Text } from "react-native";
import AppointmentCard from "./TrackingCards/AppointmentCard";


const { width } = Dimensions.get("window");
export const A = ({ route, navigation }) => {
const { currentDate } = route.params;
console.log("Route params in Track", route.params)
    return (
      <Layout style={TrackingStyles.container}>
      <TopNavigation
         position="absolute"
         top={0}
         style={{ height: hp('9%'), width: width }}
      />
      <Button
        style={{ left: wp('40%'), top: wp('5%'), height: hp('5%') }}
        appearance="outline"
        onPress={() => navigation.navigate("Home")}
     >Done</Button>

     <Image
        style={TrackingStyles.doctorContainer}
        source={require("../../assets/doctor.png")}
     />
    <Divider />
    <ScrollView
        horizontal={true}
        contentContainerStyle={{
        justifyContent: "space-around",
        flex: 1,
        flexGrow: 1,
        flexDirection: "row",
        marginLeft: "-42%",
        marginRight: "-63%",
        justifyContent: "center",
        bottom: hp('-45%'),
    }}
  >
    <MedicationCard />
    <PainCard navigation={navigation}
      route={route} />
    <MoodCard navigation={navigation}
      route={route} />
    <BloodCard navigation={navigation}
      route={route} />
    <DigestionCard navigation={navigation}
      route={route} />
    <ExerciseCard navigation={navigation}
      route={route} />
    <DietCard navigation={navigation}
      route={route} />
    <SexCard navigation={navigation}
      route={route} />
    <SaveCard navigation={navigation} />
    <Text style={TrackingStyles.dietText}>Diet</Text>
    <Text style={TrackingStyles.sexText}>Sex</Text>
    <Text style={TrackingStyles.painText}>Pain</Text>
    <Text style={TrackingStyles.smallSaveText}>Save</Text>
  </ScrollView>
  <AppointmentCard />
  <Text style={TrackingStyles.appointmentText}>Appointment</Text>
</Layout>
);
};

我不知道该怎么做，非常感谢您的建议。谢谢。

标签： javascriptiosreactjsreact-nativetoggle