Создайте модальные перед каждым компонентом в React Native - PullRequest
Новая
       53

Создайте модальные перед каждым компонентом в React Native

0 голосов
/ 21 октября 2019

Я хочу, чтобы модал появлялся перед всеми другими компонентами. Корнем будет App.js, который создает внутри маршрутизатор с помощью response-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);

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>

1 Ответ

0 голосов
/ 21 октября 2019

Вы можете использовать модальный экран реагирования навигации.

RN Modal Ссылка: https://reactnavigation.org/docs/en/modal.html

...