Question

我想将按钮移回去，但保留标题。

我的组件如下。我想离开标题，不需要后退按钮。

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


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

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

我如何才能将按钮往后移？

Answer 1

在以后的版本中将不建议使用@ComponentScan(scopedProxy = ScopedProxyMode.INTERFACES) @SpringBootApplication @EnableTransactionManagement @EnableGlobalMethodSecurity(prePostEnabled = true) @EnableScheduling @EnableCaching @EnableJpaAuditing @EnableJpaRepositories(repositoryFactoryBeanClass = EnversRevisionRepositoryFactoryBean.class) public class Application extends SpringBootServletInitializer { @Autowired private Environment env; public static void main(String[] args) { SpringApplication.run(Application.class, args); } @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(Application.class); } @Bean @Primary public TaskExecutor threadPoolTaskExecutor() { ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor(); executor.setCorePoolSize(Integer.parseInt(Objects.requireNonNull(env.getProperty("coreThreadPoolSize")))); executor.setMaxPoolSize(Integer.parseInt(Objects.requireNonNull(env.getProperty("maxThreadPoolSize")))); executor.initialize(); return executor; } }。

请使用类似这样的函数：

headerLeft: 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

根据文档，您可以通过在stack navigator中传递options param来将标题后退按钮替换为所需的内容。找到有效的示例：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 4

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 5

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

}

尝试设置 headerLeft：空

如何删除标题中的后退按钮

5 个答案: