如何解决如何在react-native中使用另一个组件的变量
嗨,亲爱的,感谢您转来帮助我,我有一个名为 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;
这是另一个(专辑标题)组件,我想在其中使用 isPlaying 值
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;
解决方法
如果 AlbumHeader 不是 PlayerWidget 的子项,则您也需要使用全局状态,例如react-redux 或 reducer 钩子。
,我通过将该变量的值传递给相同类型的上下文来解决这个问题,如果您使用 react hook 和功能组件,则此方法有效
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。