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

Question

我想使Modal出现在所有其他组件的前面。根目录为App.js，它将使用react-navigation在内部创建一个路由器，其中包含一个名为Book.js的标签。在Book.js中，它将显示BookItem.js的列表我想要的是，当我单击每个BookItem时，模态将显示并覆盖所有内容，包括路由器的bottomtabbar，但是使用我提供的代码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);

Books.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