Блог

У меня есть следующий код для создания вкладки с использованием React Native Navigation версии 6.x:

 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}
 

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

Мой вопрос: как мне добавить этот модальный экран в мой навигатор, чтобы вызвать его с рабочего стола, и каким будет этот код вызова?

Спасибо!

Вам не нужно включать модальный в навигатор, чтобы открыть его с главной страницы.

Вы могли бы сделать что-то вроде этого:

 const HomeScreen = () => {
  const [modalVisible, setModalVisible] = useState(false);

  function _myModal() {

    return(
      <Modal
        animationType="slide"
        visible={modalVisible}
        onRequestClose={() => {setModalVisible(false)}}
      >
        <Text>Hello, I am a modal!</Text>
      </Modal>
    )
  }

  // your code
  return (
    <View>
      {/*your code*/}
      <Pressable
        onPress={() => setModalVisible(true)}
      >
        <Text>Show Modal</Text>
      </Pressable>
      {_myModal()}
    </View>
  );
};
 

В документации, основанной на React, также есть пример для компонента класса на случай, если вы работаете с ними, и дополнительная информация, которая также должна вам помочь.

Если вы хотите открыть модальный экран со своей домашней страницы, вам следует создать навигатор стека главного экрана и добавить два экрана в этот стек (домашний и модальный экраны), а затем перейти к этому модальному экрану, нажав кнопку.

Навигатор вкладок (корневая навигация MyTabs)

 ...
function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}
 

Навигатор стека (домашний пакет)

 cosnt Stack = createStackNavigator();

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="ModalScreen" component={ModalScreen}
         options={{ presentation: 'modal' }} />
    </Stack.Navigator>
  );
}
 

Рабочий стол

 export default function HomeScreen({navigation}) {
   return (
      <View>
          <TouchableOpacity onPress={() => navigation.navigate('ModalScreen'}>
              <Text>Open ModalScreen</Text>
          </TouchableOpacity>
      </View>
   )
}