React Native - 显示原生 header 后退图标

Question

有没有办法在自定义 header 中显示原生后退图标（android 和 iOS 不同）？我创建了自定义 header，但不知道如何显示它们。

我正在使用 react-navigation 版本 6

我的堆栈：

 <Stack.Navigator screenOptions={
    stackOptions({
       header: (props: any) => <Header {...props}/>,
       headerRight: () => HeaderActionIcon({
          icon: <SvgSettings/>,
         action: () => navigation.navigate('Settings')
       })
  })}>

我的header组件：

const Header = ({ ...props }: any) => {

const { options, navigation } = props

return (
    <View style={styles.container}>
        <Image
            resizeMode='repeat'
            source={require('../../assets/img/pattern.png')}
            style={styles.image}
        />
        <View style={styles.wrapper}>
            {/* Back press icon */}
            <View style={styles.leftItem}>
                {/* Back icon should be here.. */}
            </View>
            {/* Stack title */}
            <View style={styles.textWrapper}>
                <Text style={[options.headerTitleStyle, styles.titleText]} numberOfLines={1}>
                    { options.title }
                </Text>
            </View>
            {/* Settings icon */}
            <View style={styles.rightItem}>
                { options.headerRight() }
            </View>
        </View>
    </View>
)}

感谢您的每一个回答

Answer 1

这里是sample.

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

function HomeScreen({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () =>
        Platform.select({
          android: <Text>{'Left android'}</Text>,
          ios: <Text>{'Left ios'}</Text>,
        }),
      headerRight: () =>
        Platform.select({
          android: <Text>{'Right android'}</Text>,
          ios: <Text>{'Right ios'}</Text>,
        }),
    });
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
import * as React from 'react';
import { View, Text, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () =>
        Platform.select({
          android: <Text>{'Left android'}</Text>,
          ios: <Text>{'Left ios'}</Text>,
        }),
      headerRight: () =>
        Platform.select({
          android: <Text>{'Right android'}</Text>,
          ios: <Text>{'Right ios'}</Text>,
        }),
    });
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

React Native - 显示原生 header 后退图标

React Native - Show native header back icon

react-native

react-navigation-v6