如何从 react-native 中的另一个功能组件访问一个功能组件的状态？

Question

I want to access ModalView's state from MarkerView component. Actually i want to see ModalView when i click Get info. button which is in MarkerView . I want to set { setVisiblity(true) } from MarkerView component. How can i do it?

ModalView.js

const ModalView = () => {
    
    const [visiblity, setVisiblity] = useState(false);

    return (
        <Modal transparent={false} visible={visiblity} >

            <TouchableOpacity onPress={() => { setVisiblity(false)}}>
                <Text> Submit </Text>
            </TouchableOpacity>

        </Modal>
    )
}

MarkerView.js

const MarkerView = () => {

    return (
        // i want to set visiblity true from here
        <View>
            <TouchableOpacity onPress={() => { setVisiblity(true) }}> 
                    <Text>Get info.</Text>
            </TouchableOpacity>
        </View>
    )
}

App.js

import ModalVIew from './components/ModalView';
import Marker from './components/MarkerView';

const App = () => {

  return (

      <View>
        <Marker/>
        <ModalVIew/>

      </View>
  )
}

export default App;

Answer 1

you can use state management like contextAPI or redux , or you can put your state on your higher order component but this will result in some prop drilling.

App.js

 const App = () => {
    const [visiblity, setVisiblity] = useState(false);
    
      return (
    
          <View>
            <Marker visiblity={visiblity} onChangeVisiblity={(val) => setVisiblity(val)}/>
            <ModalVIew visiblity={visiblity} onChangeVisiblity={(val) => setVisiblity(val)}/>
    
          </View>
      )
    }

MarkerView.js

const MarkerView = ({visiblity, onChangeVisiblity: changeVisiblity}) => {

    return (
        <View>
            <TouchableOpacity onPress={() => changeVisiblity(true)}> 
                    <Text>Get info.</Text>
            </TouchableOpacity>
        </View>
    )
}

ModalView.js

const ModalView = ({visiblity, onChangeVisiblity:changeVisiblity}) => {
    
    const [visiblity, setVisiblity] = useState(false);

    return (
        <Modal transparent={false} visible={visiblity} >

            <TouchableOpacity onPress={() => changeVisiblity(false)}>
                <Text> Submit </Text>
            </TouchableOpacity>

        </Modal>
    )
}