如何使标题标题适应标题背景与React导航？

8oomwypt 于 2023-01-27 发布在 React

关注(0)|答案(1)|浏览(211)

我正在使用react导航库和react native，我想通过使用headerBackground和headerTitle屏幕选项创建一个自定义标题。
我需要一种健壮的方法来让headerTitle组件使用所有可用空间，但又不超出屏幕的限制。
到目前为止，我有（Snack link）：

function App(): JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          options={{
            headerBackground: () => (
              <View
                style={{
                  flex: 1,
                  backgroundColor: 'red',
                  borderColor: 'green',
                  borderWidth: 4,
                }}
              />
            ),
            headerTitle: props => (
              <View
                style={{
                  backgroundColor: 'blue',
                  flex: 1,
                }}>
                <Text>Header Title</Text>
              </View>
            ),
          }}>
          {() => <SafeAreaView />}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

注意，我使用内联样式和其他一些不好的做法只是为了缩短这个问题的代码。
结果如下：

注意headerTitle组件是如何无限制地增长的。
有没有一个强大的方法来处理这个问题？注意我试图避免获得/使用设备的尺寸，因为在标题中可以是其他内容，如backButton，或右侧的其他选项按钮。
先谢了。

react-native

来源：https://stackoverflow.com/questions/75209433/how-to-make-headertitle-to-fit-into-headerbackground-with-react-navigation

1条答案

按热度按时间

eeq64g8w1#

下面是运行此代码代码示例，可能对您有所帮助：）
App.js

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

const image = { uri: 'https://reactjs.org/logo-og.png' };

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{}}>
      <ImageBackground source={image} style={styles.image}>
      <TouchableOpacity
      onPress={()=>navigation.navigate("Home")}
      >
      <Image source={{uri:"https://cdn-icons-png.flaticon.com/128/189/189254.png"}} style={{width:30,height:30,marginLeft:10,marginTop:20}}/>
      <Text style={{fontSize:30 ,color:'white',textAlign:'center',fontWeight:'bold',marginTop:-40}}> hello world</Text>
        </TouchableOpacity>
      </ImageBackground>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  image: {
    width: "100%",
    height: 60,
  },
  text: {
    color: 'white',
    fontSize: 42,
    lineHeight: 84,
    fontWeight: 'bold',
    backgroundColor: '#000000c0',
  },
});

export default App;

赞(0）回复(0）举报 2023-01-27

我来回答

如何使标题标题适应标题背景与React导航？

1条答案

相关问题

热门标签

最新问答