如何在React Native的Header中添加多张图片与多个按钮？代码求助

要在Header的左侧/右侧放置多个图片、按钮，只需用View容器包裹多个组件即可，以下是修正后的完整代码：

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

const Stack = createStackNavigator();

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

const LoginScreen = () => {
  return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Login Screen</Text>
  </View>;
};

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          options={({ navigation }) => ({
            headerLeft: () => (
              <View style={styles.headerLeftContainer}>
                <Image
                  style={styles.headerIcon}
                  source={require('./assets/videocamera.png')} 
                />
                <Image
                  style={styles.headerIcon}
                  source={require('./assets/another-icon.png')} // 替换为你的第二张图片路径
                />
              </View>
            ),
            headerRight: () => (
              <View style={styles.headerRightContainer}>
                <TouchableOpacity style={styles.headerBtn} onPress={() => navigation.navigate('login')}>
                  <Text style={styles.btnText}>SIGN IN</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.headerBtn} onPress={() => console.log('触发注册操作')}>
                  <Text style={styles.btnText}>SIGN UP</Text>
                </TouchableOpacity>
              </View>
            )
          })}
        />
        <Stack.Screen name="login" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  headerLeftContainer: {
    flexDirection: 'row',
    gap: 12,
    marginLeft: 10,
  },
  headerIcon: {
    width: 50,
    height: 50,
  },
  headerRightContainer: {
    flexDirection: 'row',
    gap: 16,
    marginRight: 10,
  },
  headerBtn: {
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  btnText: {
    color: '#007AFF',
    fontSize: 16,
    fontWeight: '500',
  },
});

export default MyStack;

关键说明： #

• 用View作为容器，设置flexDirection: 'row'让内部元素横向排列，通过gap或margin控制元素间距
• 在options参数中解构获取navigation对象，确保页面跳转功能正常
• 确保所有JSX标签正确闭合，避免语法错误
• 可根据需求自定义容器样式、元素尺寸、颜色等属性

内容的提问来源于stack exchange，提问作者Timothy Runts