對所有屏幕使用相同的組件 REACT-NATIVE

Question

我正在構建一個音樂播放器，我想實現這個：

在底部，有一個底頁，所以如果我 go 到專輯，藝術家，它仍然存在，我該怎么辦？ 現在我只有一個屏幕，在這種情況下是曲目：

render ()
    const props = {
            playing: this.state.playing,
            update_playing: this.update_playing.bind(this),
            update_next_song: this.update_next_song.bind(this),
            repeat_song: this.repeat_song.bind(this),
            repeat_queue: this.repeat_queue.bind(this),
            show_hide_icon: this.show_hide_icon.bind(this),
            current_track_id: this.state.current_track_id,
            current_track: (this.state.current_track === "") ? this.props.info_track[0]?.title : this.state.current_track,
            cover: (this.state.current_track === "") ? this.props.info_track[0]?.cover : this.state.cover,
            artist: (this.state.current_track === "") ? this.props.info_track[0]?.artist : this.state.artist,
            show_icon: this.state.show_icon,
            tracks: this.props?.tracks,
            first_id_song: this.props?.first_id_song,
            last_id_song: this.props?.last_id_song,
        }
        
return (
<>
    <View style = {{flex: 1, backgroundColor: "black"}}>
                   <Text style = {{fontSize: 30, color: "red"}}>{saludo}</Text>
                    <FlatList
                        data = {this.props.tracks}
                        keyExtractor = {(item) => item.id.toString()}
                        renderItem = {({item}) => (
                            <TouchableOpacity onPress = {() => {this.play_selected_music(item) ; this.get_track_cover_artist(item)}}>
                                <View style = {this.styles.tracks_container}>
                                    <View style = {this.styles.tracks_info_container}>
                                        {
                                            (item?.cover) ? <Image source = {{uri:"file:///"+item.cover}} style={{ width: 100, height: 100, marginLeft: 20}}></Image>
                                            : <Image source = {require("../assets/default_image.jpg")} style={{ width: 100, height: 100, marginLeft: 20}}></Image>
                                        }
                                        <View style = {this.styles.tracks}>
                                            <View>
                                                <Text style = {{color: "white", fontSize: 20, marginLeft: 10}} numberOfLines = {1}>
                                                    {
                                                        (item.title.length > 20) ?  
                                                        item.title.substring(0,18).padEnd(20,".") 
                                                        : item.title
                                                
                                                    }
                                                </Text>
                                            </View>
                                            <View style = {this.styles.artist_duration}>
                                                <Text style = {{color: "white", fontSize: 10, marginLeft: 10}}>
                                                    Artist: {(item.artist.length > 15) ? 
                                                    item.artist.substring(0,14).padEnd(16,".") 
                                                    : item.artist}
                                                </Text>
                                                <Text style = {{color: "white",fontSize: 10, marginLeft: 10}}>
                                                    Duration: {this.get_time(item.duration)}
                                                </Text>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        )}
                        >
                    </FlatList>
                    <BottomSheet
                        ref = {ref => (this.sheetref = ref)}
                        initialSnap = {1}
                        snapPoints = {[Dimensions.get("window").height - StatusBar.currentHeight, 95]}
                        renderHeader = {() => <Player_Header {...props}></Player_Header>}
                        renderContent = {() => <Track_Zone {...props}></Track_Zone>}
                        enabledContentGestureInteraction = {false}
                        onOpenEnd = {this.hide_icon}
                        onCloseEnd = {this.show_icon}>
                    </BottomSheet>
                </View>
</>)

它從組件接收道具以在每次軌道更改時進行更新，考慮將其放在導航器之外，但是，如何獲得所有必要的道具、功能等來更新它？

這是我的導航器：

<Tab.Navigator>
        <Tab.Screen name = "Tracks" children = {({navigation}) => <Tracks navigation = {navigation}></Tracks>}></Tab.Screen>
        <Tab.Screen name = "Chao" children = {({navigation}) => <Chao navigation = {navigation}></Chao>}></Tab.Screen>
 </Tab.Navigator>

Answer 1

你可以定義一個 HOC 來渲染 BottomSheet withTracKBottomSheet()現在你可以用 withTrackBottomSheet() 來包裝每個應該有一個 BottomSheet 的withTrackBottomSheet() 。

像這樣的東西

const withTrackBottomSheet = Component => {
  // Do all the business logic

  return (
    <>
      <Component />
      <BottomSheet />
    </>
  );
};

在您的情況下，相同的 state 將在多個屏幕/組件之間共享。 因此，我建議您使用一些 state 管理庫，例如 redux，以使您的工作更輕松、更簡單。