对所有屏幕使用相同的组件 REACT-NATIVE

Question

im building a music-player and i want to implement this:

at the bottom, theres a bottomsheet, so if I go to albums, artist, it will still there, how can i do it? for now i have but only in one screen, in this case Tracks:

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>
</>)

it receives props from the component to get update everytime the track changes, thought about putting it outside the navigator, but then, how can get all the necessary props, functions, etc to update it?

this is my navigator:

<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

You can define a HOC to render the BottomSheet withTracKBottomSheet() Now you can wrap every screen in which there should be a BottomSheet with withTrackBottomSheet() .

Something like this

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

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

In your case, the same state will be shared among multiple screens/components. Thus I will advise you to use some state management library like redux to make your work a little easier and less complex.