在 React Native 中的每个组件前面创建一个 Modal

Question

我想让 Modal 出现在所有其他组件的前面。 根将是 App.js，它使用 react-navigation 在内部创建一个路由器，其中包含一个名为 Book.js 的选项卡。 在 Book.js 中，它会显示 BookItem.js 的列表 我想要的是，当我单击每个 BookItem 时，模态将显示并覆盖包括路由器底部标签栏在内的所有内容，但是使用我提供的代码，其中 modalVisible = false，它将显示以下内容：

https://ibb.co/mSJ48FQ

App.js

export default function App() {
  return (
    <View style={styles.container}>
      <Router />
    </View>
  );
}

Router.js

export default createAppContainer(createBottomTabNavigator);

书籍.js

    const createBookList = (data) => {
        setBooklist(data.datas.map(item => (
            <BookItem key={item.bid} data={item} />
        )))

    };

    return (
        <View style={styles.search}>
            <ScrollView>
                {booklist}
            </ScrollView>
        </View>
    );

Bookitem.js

    return (
        <View>
            <Modal isVisible={modalVisible}>
                <View>
                    <Text>Modal</Text>
                    <Button title="Hide modal" onPress={() => { setmModalVisible(false) }} />
                </View>
            </Modal>
            <TouchableOpacity onPress={() => { setmModalVisible(true) }}>
                <View style={styles.container}>
                    { bookdetail }
                </View>
            </TouchableOpacity>
        </View>

Answer 1

您可以使用反应导航模式屏幕。

RN 模态参考：https://reactnavigation.org/docs/en/modal.html