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

问题描述

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

https://ibb.co/mSJ48FQ

应用程序.js

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

路由器.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>

标签： react-nativepopupsimplemodal

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

问题描述

解决方案

推荐阅读