স্ট্যাক নেভিগেটরে শিরোনামটি লুকান ন্যাভিগেশন প্রতিক্রিয়া করুন

Question

আমি স্ট্যাক এবং ট্যাব নেভিগেটর উভয়ই ব্যবহার করে স্ক্রিনটি স্যুইচ করার চেষ্টা করছি।

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

এই ক্ষেত্রে স্ট্যাকনাভিগেটর প্রথমে এবং তারপরে ট্যাবনাভিগেটর ব্যবহার করা হয়। এবং আমি স্ট্যাক নেভিগেটরের শিরোনামগুলি আড়াল করতে চাই। আমি যখন নেভিগেশনগুলি ব্যবহার করি তখন এটি সঠিকভাবে কাজ করে না:

navigationOptions: { header: { visible: false } }

আমি এই কোডটি প্রথম দুটি উপাদান যা স্ট্যাকনাভিগেটরে ব্যবহার করছি তা চেষ্টা করছি। যদি আমি এই লাইনটি ব্যবহার করি তবে :: এর মতো কিছু ত্রুটি পাওয়া যেমন ::

Answer 1

সংস্করণ 5 হিসাবে আপডেট করুন

ভার্সন 5 এর মতো এটা বিকল্প headerShownমধ্যেscreenOptions

ব্যবহারের উদাহরণ:

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

আপনি যদি কেবল 1 স্ক্রিনে শিরোনামটি আড়াল করতে চান তবে আপনি পর্দার উপাদানগুলিতে স্ক্রিনঅ্যাপশনগুলি সেট করে এটি করতে পারেন উদাহরণস্বরূপ নীচে দেখুন:

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

সংস্করণ 5 সম্পর্কে ব্লগটি দেখুন

সংস্করণ 2.0.0-alpha.36 (2019-11-07) হিসাবে আপডেট করুন ,
একটি নতুন নেভিগেশন অপশন রয়েছে:headershown

      navigationOptions: {
        headerShown: false,
      }

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

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

পুরানো উত্তর

আমি স্ট্যাক বারটি আড়াল করতে এটি ব্যবহার করি (লক্ষ্য করুন এটি দ্বিতীয় প্যারামের মান):

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

আপনি যখন এই পদ্ধতিটি ব্যবহার করবেন তখন এটি সমস্ত স্ক্রিনে লুকিয়ে থাকবে।

আপনার ক্ষেত্রে এটি দেখতে এই রকম হবে:

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

Comments

পুরোপুরি কাজ! আপনার জবাবের জন্য ধন্যবাদ তবে এটি যুক্ত করার পরে আমার একটি সমস্যা আছে তা হল: স্ট্যাকন্যাভিগেটরটি ট্যাবনাভিগেটরে স্যুইচ করা এটির সূক্ষ্ম কাজ। আমি যখন ট্যাবনাভিগেটর থেকে স্ট্যাকনাভিয়াগটারে স্ক্রিনটি স্যুইচ করছি তখন আমি কি শিরোনাম দেখাতে চাই?

— অভিজিৎ দত্ত

হুম, এটি একটি দুর্দান্ত প্রশ্ন। সত্যি বলতে কি আমি তা জানি না। আপনি যে স্ক্রিনটি প্রদর্শন করতে চান তাতে @ppkstr উত্তরটি চেষ্টা করতে পারেন, নাল পরিবর্তে এটি সত্য হবে।

— পেরি

হুম, আমি ইতিমধ্যে এটি চেষ্টা করেছিলাম কিন্তু এটিও কাজ করছে না ... আপনার প্রথম উত্তরের জন্য ধন্যবাদ। আমি এখনই একটি বোতাম ব্যবহার করে দ্বিতীয় কার্যকারিতা করব।

— অভিজিৎ দত্ত

উপাদানটির অভ্যন্তরে বোতামটি ক্লিক করার সময় কীভাবে শিরোনামটি শিরোনাম দেখানো এবং গোপন করা যায়। যদি আমরা স্থিতিশীল নেভিগেশনঅ্যাপশনগুলি = {শিরোনাম: নাল give দেয়} আমি হেডারটি পুরোপুরি আড়াল করব। কিছু বাটনে ক্লিক করার সময় আমি প্রদর্শন করতে বা আড়াল করতে চাই

— ভেঙ্কটেশ সোমু

যদি তিনি কোনও নির্দিষ্ট পর্দার জন্য ভি 5+ এ শিরোনামটি আড়াল করতে optionsচান তবে এটিকে প্রপ ব্যবহার করা উচিত<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />

— অলিভার ডি

Answer 2

আপনি যা শিরোনামটি আড়াল করতে চান তাতে কেবল নীচের কোডটি ব্যবহার করুন

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

পড়ুন স্ট্যাক ন্যাভিগেটর

Comments

এটি অত্যন্ত জঘন্য, তবে একটি সমস্যা হ'ল যখন স্ক্রিনটি স্ট্যাকনাভিগেটর থেকে ট্যাবনাভিগেটরে স্যুইচ করে (ওটিপিভারিফিকেশন স্ক্রিনের মতো আমার প্রশ্নের উপাদানগুলিতে উল্লিখিত পর্দার তালিকার জন্য এই সময় উভয় শিরোনামই প্রদর্শিত হচ্ছে

— অভিজিৎ দত্ত

আপনি কীভাবে আমাকে তালিকাতে নেভিগেট করতে

— চলেছেন

Answer 3

এটি কেবল আপনার শ্রেণি / উপাদান কোড স্নিপেটে যুক্ত করুন এবং শিরোনামটি লুকিয়ে থাকবে

 static navigationOptions = { header: null }

Answer 4

যদি আপনার স্ক্রিনটি কোনও শ্রেণি উপাদান হয়

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

আপনার লক্ষ্যযুক্ত পর্দায় এটি প্রথম পদ্ধতি (ফাংশন) হিসাবে কোড করুন।

Comments

ঠিক আছে, header: () => nullসঠিক উপায়, অন্যথায় পৃষ্ঠাটি লোড করার সময় আপনি একটি শিরোনাম বিচ্যুতি পাবেন

— ক্রিশ্চিয়ান Tr

Answer 5

আপনি যদি এর চেয়ে বেশি নির্দিষ্ট স্ক্রিনে আড়াল করতে চান:

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

Answer 6

আমি ব্যবহারের header : nullপরিবর্তে header : { visible : true }আমি ব্যবহার করছি দেশীয় প্রতিক্রিয়া প্রতিক্রিয়া। এটি উদাহরণ:

static navigationOptions = {
   header : null   
};

Answer 7

প্রদত্ত সমাধানে শিরোনাম হোমস্ক্রিন বাই-অপশনগুলি = {{শিরোলেখের জন্য লুকানো আছে: শিরোনাম: মিথ্যা}}

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

Answer 8

স্ট্যাকনাভিগেটরে নতুন নেভিগেশনঅ্যাপশন অবজেক্ট যুক্ত করুন।

এটা চেষ্টা কর :

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 } }
});

আশা করি এটা সাহায্য করবে.

Answer 9

যদি কেউ কীভাবে শিরোনামটি টগল করতে হয় তাই উপাদানডিডমাউন্টে এমন কিছু লিখুন:

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

কখন

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>
    };
};

এবং কোথাও যখন ইভেন্ট সমাপ্তির কাজ:

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

Answer 10

এটি আমার পক্ষে কাজ করেছে:

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

Answer 11

আপনার লক্ষ্যযুক্ত পর্দায় আপনাকে এটি কোড করতে হবে!

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

Answer 12

আপনি শিরোনামটি এভাবে লুকিয়ে রাখতে পারেন:

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

Answer 13

এটি স্ট্যাক নেভিগেশনের জন্য কাজ করছে

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

Answer 14

আপনি যদি কেবলমাত্র react-native-navigationতখনই একটি পর্দা থেকে এটি সরাতে চান :

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

Answer 15

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,

};

Answer 16

সমস্ত উত্তর শ্রেণিবদ্ধ উপাদানগুলির সাথে এটি কীভাবে করা যায় তা দেখিয়ে দিচ্ছে তবে কার্যকরী উপাদানগুলির জন্য আপনি:

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

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

আপনি যদি হেডারটি সরিয়ে ফেলেন তবে আপনার উপাদানগুলি এমন জায়গাগুলিতে থাকতে পারে যেখানে আপনি এটি দেখতে পাচ্ছেন না (যখন ফোনের স্কোয়ার স্ক্রিন নেই) তাই শিরোনামটি সরানোর সময় এটি ব্যবহার করা গুরুত্বপূর্ণ।

Answer 17

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

//header:null will be removed from upcoming versions

Answer 18

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

options={{ headerShown: false }} আমার জন্য কাজ কর.

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

Answer 19

ইন গৌণ 5.x প্রতিক্রিয়া আপনি সেট করে সব পর্দার জন্য হেডার লুকিয়ে রাখতে পারেন headerModeএর ঠেকনা Navigatorকরতে false।

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

Answer 20

আপনি স্ট্যাকনাভিগেটর শিরোনামটি এটির মতো লুকিয়ে রাখতে পারেন:

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>
    );
}

Answer 21

আপনি সমাধানটিতে কী ব্যবহার করছেন প্রতিক্রিয়া-নেভিগেশন লাইব্রেরির সংস্করণটি সমস্ত আলাদা হওয়ার সাথে এটি মিলানো গুরুত্বপূর্ণ important আমার মতো কিছু কারণে এখনও রিঅ্যাক্ট-নেভিগেশন v1.0.0 ব্যবহার করছেন তাদের জন্য, এই উভয়ই কাজ করেছেন:

পৃথক স্ক্রিনে শিরোনাম অক্ষম / লুকিয়ে রাখার জন্য:

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

একবারে সমস্ত পর্দা অক্ষম / লুকিয়ে রাখার জন্য, এটি ব্যবহার করুন:

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

Answer 22

প্রতিক্রিয়া-নেভিগেশনের সর্বশেষ সংস্করণে এটি প্রতিটি স্ক্রিনে শিরোনামটি আড়াল করতে কাজ করে: শিরোলেখের মোড = none 'কিছুই নয়'}

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

Answer 23

4.x এর জন্য, এটি অবহিত header: nullকরা হয়েছে, headerShown: falseপরিবর্তে ব্যবহার করা উচিত

উদা:

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

Answer 24

1. একক স্ক্রিনের জন্য, আপনি শিরোনাম সেট করতে পারেন : নাল বা শিরোলেখ শাউন: তৈরি স্ট্যাকনাভিগেটরে এই জাতীয়

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

2. একবারে ডিফল্ট নেভিগেশনঅ্যাপশন ব্যবহার করে সমস্ত পর্দা থেকে শিরোনামটি লুকান

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

Answer 25

আপনি যদি সমস্ত স্ক্রিন গেটো অ্যাপ.জেএস থেকে শিরোনামটি সরাতে চান এবং স্ট্যাক.ন্যাভিগেটরে এই কোডটি যুক্ত করুন

screenOptions={ { headerShown: false } }