Как отобразить или скрыть строку состояния на разных экранах в React Native

#javascript #reactjs #react-native

Вопрос:

Я новичок в родной реакции и пытаюсь создать какое-нибудь приложение, в котором я хочу показывать или скрывать строку состояния на разных экранах.На главном экране я не хочу показывать строку состояния, для которой я установил ее свойство hidden={true} , но при этом она также не отображается на других экранах, как я могу сделать ее видимой на других экранах.

На Onboard Home экране и и я хочу показать строку состояния, а на Login Register экране и я не хочу показывать строку состояния.

Ниже приведен мой код:

App.js

 import React from 'react';
import {StatusBar} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Onboard from './components/Onboard';
import Login from './components/Login';
import Register from './components/Register';
import Home from './components/Home';

const Stack = createStackNavigator();

const App = () => {

return (
  <NavigationContainer>
   <StatusBar hidden={true}/>
    <Stack.Navigator>
     <Stack.Screen
       name="Onboard"
       component={Onboard}
       options={{ headerShown: false }} />
    <Stack.Screen
      name="Login"
      component={Login}
      options={{ headerShown: false }} />
    <Stack.Screen
      name="Register"
      component={Register} />
    <Stack.Screen
      name="Home"
      component={Home} 
      options={{ 
        headerLeft: null,
        headerTintColor:'white',
        headerStyle: {
          backgroundColor: '#e57373',
          elevation:0,
          shadowOpacity:0
       } }}/>  
    </Stack.Navigator>
  </NavigationContainer>
  );
};

export default App;

Кто-нибудь, дайте мне знать, как я могу достичь желаемых результатов.

Ответ №1:

Если вы не хотите размещать строку состояния… на каждом экране, вы также можете использовать useFocusEffect функцию навигации по реакции. https://reactnavigation.org/docs/use-focus-effect/

Это чище и легко читается.

 import { useFocusEffect } from '@react-navigation/native';

 useFocusEffect(() => {
  // This will run when component is `focused` or mounted.
  StatusBar.setHidden(true);

  // This will run when component is `blured` or unmounted.
  return () => {
    StatusBar.setHidden(false);
  }
});

1. Есть ли способ изменить цвет строки состояния для разных экранов.

2. Вы можете использовать методы строки состояния для изменения стиля reactnative.dev/docs/строка состояния#setbarstyle

3. когда я пробую ваше решение, я получаю эту ошибку «[Ошибка типа: неопределенный не является функцией (рядом с » …(0, _react.useFocusEffect)…»)]`.

4. @Digvijay useFocusEffect следует импортировать из навигации react, а не из react. import { useFocusEffect } from '@react-navigation/native';

5. Да, теперь все работает нормально, я сделал неправильный импорт. Спасибо

Ответ №2:

 componentDidMount() {
   StatusBar.setHidden(false);
}

Добавьте этот код в класс каждой страницы. Напишите «правда» или «ложь«, чтобы показать и скрыть.