web-dev-qa-db-ja.com

スタックナビゲータでヘッダを隠す

スタックとタブの両方のナビゲーターを使って画面を切り替えようとしています。

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

この場合、stacknavigatorが最初に使用され、次にtabnavigatorが使用されます。そして私はスタックナビゲーターのヘッダーを隠したいです。私は::のようなnavigationoptionsを使用するときそれは正しく動作していません：：

navigationOptions: { header: { visible: false } }

私はstacknavigatorで使用している最初の2つのコンポーネントでこのコードを試しています。私はこの行を使用している場合：それからいくつかのようなエラーを取得：：

enter image description here

javascriptreact-nativereact-navigationexpo
56
Avijit Dutta

これを使ってスタックバーを隠します（これが2番目のパラメータの値であることに注意してください）。

{
    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,
  }
 }
);
93
Perry

ヘッダーを非表示にするページの下のコードを使用するだけです。

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

Stack Navigator を参照してください。

95
Dpkstr

これをクラス/コンポーネントのコードスニペットに追加するだけで、ヘッダーが非表示になります。

 static navigationOptions = { header: null }
19
Vaibhav Bacchav

あなたがこのようにするよりも特定のスクリーンを隠したいならば：

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

画面がクラスコンポーネントの場合

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

最初の方法（機能）として、ターゲットの画面にこれをコーディングします。

7
user7023664

ComponentDidMountでヘッダーを切り替える方法を探している人がいる場合は、次のように書きます。

  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,
});
4
Ernestyno

つかいます

static navigationOptions = { header: null }

クラス/コンポーネント内

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}
4
Vahid Akhtar

header : nullの代わりにheader : { visible : true }を使用しています。私はreact-native cliを使用しています。これは例です：

static navigationOptions = {
   header : null   
};
3
Cevin Ways

これは私のために働いた：

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);
2
Diego Santa Cruz Mendezú

あなたのターゲット画面では、これをコーディングする必要があります。

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }
1
Pheng Sengvuthy
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,

};
1
donald