如何删除标题中的后退按钮反应本机

Question

我想删除按钮，但保留标题。

我的组件如下。我想保留标题，而且不需要后退按钮。

import React from 'react';
import { View } from 'react-native';


export const TrucksScreen = () => {
    return (
        <View>
           ....
        </View>
    );
});

TrucksScreen.navigationOptions = {
    headerTitle: 'Trucks Screen',
};

如何将按钮移除？

Answer 1

使用

headerLeft: null

将在未来版本中弃用。

而是使用这样的函数：

TrucksScreen.navigationOptions = {
    headerTitle: 'Trucks Screen',
    headerLeft: () => {
      return null;
    },
};

干杯！

Answer 2

在导航选项中设置

headerLeft: null。这将从头部删除后退按钮，就像我在最后一行代码中所做的那样。

 import React from 'react';
    import { View } from 'react-native';

    export const TrucksScreen = () => {
        return (
            <View>
               ....
            </View>
        );
    });

    TrucksScreen.navigationOptions = {
        headerTitle: 'Trucks Screen',
        headerLeft: null,
    }; 

我希望它会有所帮助。有疑问请追问

Answer 3

Home: {
screen: HomeScreen,
navigationOptions: {
  headerLeft: null,
       
}

}

尝试设置

headerLeft: null

Answer 4

根据文档，您可以通过在堆栈导航器中传递选项参数来将标题后退按钮替换为您想要的任何内容。请找到工作示例：

expo-snack：

import * as React from 'react';
import { View, Text, Button, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerTitle: props => <LogoTitle {...props} />,
            headerRight: () => (
              <Button
                onPress={() => alert('This is a button!')}
                title="Info"
                color="#00cc00"
              />
            ),
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

希望有帮助。有疑问请放心

Answer 5

import React from 'react';
import { View, TouchableOpacity, Image, Text } from 'react-native';
import PropTypes from 'prop-types';
import style from '../../../utils/style';
import images from '../../../images/images';

class Header extends React.Component {
    constructor(props) {
        super(props);
    }


    onRightIconPress = () => {
        if (this.props.onRightIconPress) {
            this.props.onRightIconPress();
        }
    };

    render() {
        const { title, navigation, showBackIcon, showRightIcon, rightIcon } = this.props;

        return (
            <View style={style.headerrowcontainer}>
                {/* Back  Button*/}
                {showBackIcon ? (
                    <TouchableOpacity onPress={() => navigation.goBack()}>
                        <Image resizeMode="contain" source={images.iconback} style={style.backimage} />
                    </TouchableOpacity>
                ) : (
                    <View />
                )}
                {/* Title */}
                <Text style={style.titleheader}>{title}</Text>
                {/* Right Icon */}
                {showRightIcon ? (
                    <Image name={rightIcon} style={style.rightIcon} onPress={this.onRightIconPress} />
                ) : (
                    <View />
                )}
            </View>
        );
    }
}

Header.defaultProps = {
    title: '',
};
Header.propTypes = {
    title: PropTypes.string,
};
export default Header;

Answer 6

在 RN6 中不起作用。

TrucksScreen.navigationOptions = { headerTitle: '卡车屏幕', headerLeft: () => { 返回空值； }, };

Answer 7

<Stack.Screen
  options={{ headerShown: true, title: "",headerBackVisible: false}}
/>

它对我有用