REACT NATIVE - 使用自定義組件在應用程序屏幕上觸發模式

Question

我正在嘗試使用自定義按鈕組件在應用程序屏幕上觸發模態。

我創建了一個名為SelectBoxLong.js的可重用按鈕

      <TouchableOpacity style={styles.containerLong} onPress={onPress}>
        <Text style={styles.text}>{text}</Text>
        <MaterialCommunityIcons name="menu-down" size={10} />
      </TouchableOpacity>

此外，我創建了一個名為FilterModal.js的模態組件，其中包含觸發模態的 useState：

const FilterModal = ({ text, onPress }) => {
  const [modalVisible, setModalVisible] = React.useState(false);

在App Screen 上，我包含了組件和 FilterModal 但我無法在這 3 之間建立聯系。

我想要的是，當用戶點擊 SelectBoxLong 時，模態觸發模態，模態的標題獲取按鈕的標題

我試過

- 在 Modal 內部創建一個觸發 Modal 的函數

- 將 useState 作為道具傳遞

Answer 1

應用畫面：

const [modalVisible, setModalVisible] = React.useState(false);
const [buttonTitle, setButtonTitle] = React.useState(‘’);

onPress = () => {
  setModalVisible(true);
}


render(){
    return(
        ……
        <SelectBoxLong.js onPress={onPress} text={text}/>
        <FilterModal modalVisible={modalVisible} onPress={onPress} text={buttonTitle} />
        ….
    );
}

FilterModal.js

const FilterModal = ({ modalVisible , text, onPress }) => {
  const [modalVisible, setModalVisible] = React.useState(modalVisible);


  useEffect(() => {
    setModalVisible(modalVisible);
  }, [modalVisible]);