Javascript 如何在react native中使用另一个Component中的变量

您好，亲爱的，谢谢您的帮助，我有一个组件调用PlayerWidget，希望使用它。状态变量是AlbumHeader组件中的

isPlaying

值

这是我的密码

游戏迷

import React, { useContext, useEffect, useState } from 'react';
import { Text, Image, View, TouchableOpacity } from 'react-native';
import { AntDesign, FontAwesome } from "@expo/vector-icons";
import { API, graphqlOperation } from 'aws-amplify';

import styles from './styles';
import { Song } from "../../types";
import { Sound } from "expo-av/build/Audio/Sound";

import { AppContext, Status } from '../../AppContext';
import { getSong } from "../../src/graphql/queries";

const PlayerWidget = () => {

    const [song, setSong] = useState(null);
    const [sound, setSound] = useState<Sound | null>(null);
    //this is the Variable I will like to use in my AlbumHeader Component isPlaying
    const [isPlaying, setIsPlaying] = useState<boolean>(true);

    const [duration, setDuration] = useState<number | null>(null);
    const [position, setPosition] = useState<number | null>(null);

    //const { songStatus, setSongStatus } = useContext(Status);

    setSongStatus(isPlaying);
    

    const { songId } = useContext(AppContext);



    useEffect(() => {
        const fetchSong = async () => {
            try {
                const data = await API.graphql(graphqlOperation(getSong, { id: songId }))

                setSong(data.data.getSong);
            } catch (e) {
                console.log(e);
            }
        }

        fetchSong();
    }, [songId])

    const onPlaybackStatusUpdate = (status) => {
        setIsPlaying(status.isPlaying);
        setDuration(status.durationMillis);
        setPosition(status.positionMillis);


    }

    const playCurrentSong = async () => {

        if (song.artist.length > 10) {
            song.artist = song.artist.substring(0, 6) + "...";
        }

        if (song.title.length > 8) {
            song.title = song.title.substring(0, 5) + "...";
        }
        if (sound) {
            await sound.unloadAsync();
        }

        const { sound: newSound } = await Sound.createAsync(
            { uri: song.uri },
            { shouldPlay: isPlaying },
            onPlaybackStatusUpdate
        )

        setSound(newSound)
    }

    useEffect(() => {
        if (song) {
            playCurrentSong();
        }
    }, [song])

    const onPlayPausePress = async () => {
        if (!sound) {
            return;
        }
        if (isPlaying) {
            await sound.stopAsync();
        } else {
            await sound.playAsync();
        }
    }

    const getProgress = () => {
        if (sound === null || duration === null || position === null) {
            return 0;
        }

        return (position / duration) * 100;
    }

    if (!song) {
        return null;
    }

    return (
        <View style={styles.container}>
            <View style={[styles.progress, { width: `${getProgress()}%` }]} />
            <View style={styles.row}>
                <Image source={{ uri: song.imageUri }} style={styles.image} />
                <View style={styles.rightContainer}>
                    <View style={styles.nameContainer}>
                        <Text style={styles.title}>{song.title}</Text>
                        <Text style={styles.artist}>{song.artist}</Text>
                    </View>

                    <View style={styles.iconsContainer}>
                        <AntDesign name="hearto" size={20} color={'white'} />
                        <TouchableOpacity onPress={onPlayPausePress}>
                            <AntDesign name={isPlaying ? 'pausecircleo' : 'playcircleo'} size={25} color={'white'} />
                        </TouchableOpacity>

                    </View>

                </View>

            </View>

        </View>
    )
}


export default PlayerWidget;

import React，{useContext，useffect，useState}来自'React'；
从“react native”导入{文本、图像、视图、TouchableOpacity}；
从“@expo/vector icons”导入{AntDesign，FontAwesome}”；
从“aws amplify”导入{API，graphqlOperation}；
从“./styles”导入样式；
从“./../types”导入{Song}”；
从“expo av/build/Audio/Sound”导入{Sound}；
从“../../AppContext”导入{AppContext，Status}；
从“../../src/graphql/querys”导入{getSong}”；
const PlayerWidget=（）=>{
const[song，setSong]=useState（空）；
const[sound，setSound]=使用状态（null）；
//这是我想在AlbumHeader组件iPlay中使用的变量
const[isplay，setisplay]=useState（true）；
const[duration，setDuration]=useState（null）；
const[position，setPosition]=useState（null）；
//const{songStatus，setSongStatus}=useContext（Status）；
设置状态（显示）；
const{songId}=useContext（AppContext）；
useffect（（）=>{
const fetchSong=async（）=>{
试一试{
const data=await API.graphql（graphql操作（getSong，{id:songId}））
setSong（data.data.getSong）；
}捕获（e）{
控制台日志（e）；
}
}
fetchSong（）；
}，[songId]）
const onPlaybackStatusUpdate=（状态）=>{
设置显示（状态为isplay）；
setDuration（状态为durationMillis）；
设置位置（状态。位置毫秒）；
}
const playCurrentSong=async（）=>{
如果（song.Artister.length>10）{
song.artist=song.artist.substring（0,6）+“…”；
}
如果（歌曲标题长度>8）{
song.title=song.title.substring（0,5）+“…”；
}
如果（声音）{
等待声音。unloadAsync（）；
}
const{sound:newSound}=wait sound.createAsync(
{uri:song.uri}，
{shouldPlay:isplay}，
onplaybackstatus更新
)
设置声音（新声音）
}
useffect（（）=>{
如果（歌曲）{
播放当前歌曲（）；
}
}[歌]）
const onPlayPausePress=async（）=>{
如果（！声音）{
返回；
}
如果（显示）{
等待声音。stopAsync（）；
}否则{
等待声音；
}
}
const getProgress=（）=>{
如果（声音===null | |持续时间===null | |位置===null）{
返回0；
}
返回（位置/持续时间）*100；
}
如果（！歌曲）{
返回null；
}
返回(
{song.title}
{宋。艺术家}
)
}
导出默认PlayerWidget；

这是我想在其中使用isplay值的另一个组件（相册头）

import React from 'react';
import { useContext } from 'react';
import { View, Text, Image } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { AppContext, Status } from '../../AppContext';
import { Album } from '../../types';
import styles from './styles';


export type AlbumHeaderProp = {
    album: Album;
}

const AlbumHeader = (props: AlbumHeaderProp) => {

    const { album } = props;

    const { setSongId, songId } = useContext(AppContext);
    var playalbumSong = new Array();

    const { songStatus } = useContext(Status);

    const playallSong = () => {
        const name = 'name';

        console.log("I will play all the songs George huum");
        const myArray = album.songs.items;

        myArray.forEach((element: any, index: number, array: any) => {
            playalbumSong.push(element.id);
          

        });


        console.log(songStatus);
        setSongId(playalbumSong[0]);

    }
    return (
        <View style={styles.container}>
            <Image source={{ uri: album.imageUri }} style={styles.image} />
            <Text style={styles.name}>{album.name}</Text>

            <View style={styles.creatorContainer}>
                <Text style={styles.creator}>By {album.by}</Text>
                <Text style={styles.likes}>{album.numberOfLikes} Likes</Text>
            </View>
            <TouchableOpacity onPress={playallSong}>
                <View style={styles.button}>
                    <Text style={styles.buttonText}>Play</Text>
                </View>
            </TouchableOpacity>

        </View>
    )
}

export default AlbumHeader;

从“React”导入React；
从“react”导入{useContext}；
从“react native”导入{视图、文本、图像}；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从“../../AppContext”导入{AppContext，Status}；
从“../../types”导入{Album}；
从“./styles”导入样式；
导出类型AlbumHeaderProp={
相册：相册；
}
常量AlbumHeader=（道具：AlbumHeaderProp）=>{
const{album}=props；
const{setSongId，songId}=useContext（AppContext）；
var playalbumSong=新数组（）；
const{songStatus}=useContext（Status）；
康斯特播放歌曲=（）=>{
常量名称='name'；
log（“我将播放George huum的所有歌曲”）；
const myArray=album.songs.items；
forEach（（元素：any，索引：number，数组：any）=>{
playalbumSong.push（element.id）；
});
console.log（songStatus）；
setSongId（playalbumSong[0]）；
}
返回(
{album.name}
由{album.By}
{album.numberOfLikes}喜欢
玩
)
}
导出默认标题；

如果AlbumHeader不是PlayerWidget的子项，您也需要使用全局状态，例如react redux或reducer挂钩