Ẩn tiêu đề trong trình điều hướng ngăn xếp Điều hướng phản ứng

Tôi đang cố chuyển đổi màn hình bằng cả trình điều hướng ngăn xếp và tab.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

Trong trường hợp này, stacknavigator được sử dụng đầu tiên và sau đó là tabnavigator. và tôi muốn ẩn tiêu đề của trình điều hướng ngăn xếp. Nó không hoạt động bình thường khi tôi sử dụng các điều hướng như ::

navigationOptions: { header: { visible: false } }

tôi đang thử mã này trên hai thành phần đầu tiên đang sử dụng trong stacknavigator. nếu tôi sử dụng dòng này thì gặp một số lỗi như ::

CẬP NHẬT kể từ phiên bản 5

Kể từ phiên bản 5, nó là tùy chọn headerShowntrongscreenOptions

Ví dụ về cách sử dụng:

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

Nếu bạn chỉ muốn ẩn tiêu đề trên 1 màn hình, bạn có thể thực hiện việc này bằng cách thiết lập screenOptions trên thành phần màn hình, xem ví dụ bên dưới:

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

Xem thêm blog về phiên bản 5

CẬP NHẬT
Kể từ phiên bản 2.0.0-alpha.36 (2019-11-07),
có một điều hướng mớiheadershown

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Câu trả lời cũ

Tôi sử dụng điều này để ẩn thanh ngăn xếp (lưu ý đây là giá trị của tham số thứ hai):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

Khi bạn sử dụng phương pháp này, nó sẽ bị ẩn trên tất cả các màn hình.

Trong trường hợp của bạn, nó sẽ như thế này:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

Chỉ cần sử dụng mã bên dưới trong trang bạn muốn ẩn tiêu đề

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

tham khảo Stack Navigator

Chỉ cần thêm mã này vào đoạn mã lớp / thành phần của bạn và Tiêu đề sẽ bị ẩn

 static navigationOptions = { header: null }

Nếu màn hình của bạn là một thành phần lớp

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

mã này trong màn hình được nhắm mục tiêu của bạn làm phương thức (hàm) đầu tiên.

Nếu bạn muốn ẩn trên màn hình cụ thể hơn làm như thế này:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

Tôi đang sử dụng header : nullthay vì header : { visible : true }tôi đang sử dụng cli gốc phản ứng. đây là ví dụ:

static navigationOptions = {
   header : null   
};

Trong giải pháp đã cho, Header bị ẩn đối với HomeScreen by- options = {{headerShown: false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

Thêm đối tượng navigationOptions mới trong stackNavigator.

Thử cái này :

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

Hy vọng nó giúp.

Nếu ai đó đang tìm kiếm cách chuyển đổi tiêu đề để trong componentDidMount, hãy viết một cái gì đó như:

  this.props.navigation.setParams({
      hideHeader: true,
  });

Khi nào

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

Và ở đâu đó khi sự kiện kết thúc công việc:

this.props.navigation.setParams({
  hideHeader: false,
});

Điều này đã làm việc cho tôi:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

Trong màn hình được nhắm mục tiêu của bạn, bạn phải viết mã này!

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }

Bạn có thể ẩn tiêu đề như sau:

<Stack.Screen name="Login" component={Login} options={{headerShown: false}}  />

Điều này đang hoạt động để điều hướng ngăn xếp

<Stack.Screen
    name="Home"
    component={HomeComponent}
    options={{
        headerShown: false,
    }}
/>

Nếu bạn chỉ muốn xóa nó khỏi một màn hình react-native-navigationthì:

<Stack.Navigator>
    <Stack.Screen 
            name="Login" 
            component={Login} 
            options= {{headerShown: false}} />
</Stack.Navigator>

const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

Tất cả câu trả lời là hiển thị cách thực hiện với các thành phần lớp, nhưng đối với các thành phần chức năng, bạn làm:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

Nếu bạn xóa tiêu đề, thành phần của bạn có thể nằm ở những nơi mà bạn không thể nhìn thấy nó (khi điện thoại không có màn hình vuông), vì vậy điều quan trọng là phải sử dụng nó khi xóa tiêu đề.

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{ headerShown: false }} làm việc cho tôi.

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",

Trong điều hướng phản ứng 5.x, bạn có thể ẩn tiêu đề cho tất cả các màn hình bằng cách đặt phần headerModehỗ trợ của Navigatorthành false.

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

Bạn có thể ẩn tiêu đề StackNavigator như sau:

const Stack = createStackNavigator();
function StackScreen() {
    return (
        <Stack.Navigator
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Training" component={Training} />
            <Stack.Screen name="Course" component={Course} />
            <Stack.Screen name="Signup" component={Signup} />
        </Stack.Navigator>
    );
}

Điều quan trọng là phải khớp phiên bản thư viện điều hướng phản ứng bạn đang sử dụng với giải pháp vì chúng đều khác nhau. Đối với những người vẫn đang sử dụng react-navigation v1.0.0 vì một số lý do như tôi, cả hai điều này đều hoạt động:

Để tắt / ẩn tiêu đề trên từng màn hình:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

Để tắt / ẩn tất cả các màn hình cùng một lúc, hãy sử dụng:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

Trong phiên bản mới nhất của điều hướng phản ứng, điều này hoạt động để ẩn tiêu đề trên mọi màn hình: headerMode = {'none'}

<Stack.Navigator
headerMode={'none'}
>
    <Stack.Screen name="Home" component={HomeScreen}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>

đối với 4.x, header: nullkhông được dùng nữa, nên sử dụng headerShown: falsethay thế

Ví dụ:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

1. Đối với màn hình đơn, bạn có thể đặt header: null hoặc headerShown: false trong createStackNavigator như thế này

   const App = createStackNavigator({
    First: {
   screen: Home,
   navigationOptions: {
     header: null,
                      },
          },
   });

2. Ẩn tiêu đề khỏi tất cả các màn hình trong một lần sử dụng defaultNavigationOptions

   const App = createStackNavigator({
   
   First: {
     screen: HomeActivity,
   },
   },
   
   {
   defaultNavigationOptions: {
     header: null
   },
   
   });

nếu bạn muốn xóa tiêu đề khỏi tất cả màn hình, goto app.js và thêm mã này vào Stack.Navigator

screenOptions={ { headerShown: false } }