如何在 React Navigation 6 的标题中输入全角文本？

Question

在我的 React Native (Expo) 应用程序中，我想将 React Navigation 从 V5 升级到 V6。但是，我无法使堆栈导航器标题中的TextInput 全角。我尝试了 'auto' 和 '100%' 在样式中设置 width 值，但是对于真正的宽文本框都没有帮助。

这里是复制世博小吃的链接：https://snack.expo.io/@vahdet/reactnavigation6-headerbar，下面是其中的App.js 内容。我想我在headerSearchBarStyle 中缺少一些flexbox 知识：

import React, { useLayoutEffect, useState } from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { enableScreens } from 'react-native-screens';
import { AppearanceProvider } from 'react-native-appearance';
import { StatusBar } from 'expo-status-bar';
import { createStackNavigator } from '@react-navigation/stack';

enableScreens();
const HomeStack = createStackNavigator();

const Search = () => {
  const navigation = useNavigation();
  const [searchText, setSearchText] = useState('');

  // Customize header
  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: () => (
        <TextInput
          style={styles.headerSearchBarStyle}
          value={searchText}
          onChangeText={(val) => setSearchText(val)}
          containerStyle={styles.searchBarContainerStyle}
          placeholder="Search..."
          returnKeyType="search"
          textContentType="none"
          cancelButtonTitle="Cancel"
        />
      )
    })
  }, [navigation, searchText]);

  return (
    <View style={styles.view}>
      {!searchText ? (
        <Text>Search results go here</Text>
      ) : (
        <Text>Initial (no search) content goes here</Text>
      )}
    </View>
  )
}

const App = () => {
  return (
    <AppearanceProvider>
      <StatusBar style="auto" />
      <NavigationContainer>
        <HomeStack.Navigator initialRouteName="Search">
          <HomeStack.Screen name="Search" component={Search} />
        </HomeStack.Navigator>
        </NavigationContainer>
    </AppearanceProvider>
  );
}

const styles = StyleSheet.create({
  headerSearchBarStyle: {
    width: 'auto', // also tried '100%'
    borderColor: 'black',
    borderWidth: 1,
    backgroundColor: 'transparent'
  },
});

export default App;

编辑：在Kartikey's approach 之后我想详细说明 full-width，我并不一定是指整个 screen 宽度：可能有headerLeft（例如后退按钮）或headerRight组件同时使用的场景。

Answer 1

使用设备宽度

import { Dimensions } from "react-native";

const ScreenWidth = Dimensions.get('window').width;

和

headerSearchBarStyle: {
    width: ScreenWidth,
    borderColor: 'black',
    borderWidth: 1,
    backgroundColor: 'transparent',
    margin: 10,
  },

您也可以将其设置为width: ScreenWidth - 30，只是为了留出一些余量

Working Example