如何在 React Native 中更改导航栏标题答案

【问题标题】：How can i change Navigationbar title in React Native如何在 React Native 中更改导航栏标题
【发布时间】：2021-02-03 06:35:14
【问题描述】：

我是 React Native 的新手。我正在使用导航栏创建新的基本应用程序。我有两个屏幕。

首页
列表

我想用“主屏幕”和“列表屏幕”更改导航栏标题

我在主屏幕上有一个按钮。当我点击按钮时，它会导航到列表屏幕。

我的问题是我无法更改列表屏幕中的标题。

App.js

import { createAppContainer } from '@react-navigation/native';
import { createStackNavigator } from 'react-navigation-stack';

import HomeScreen from './src/screens/HomeScreen';
import ListScreen from './src/screens/ListScreen';


const navigator = createStackNavigator({

  Home: HomeScreen,
  List: ListScreen
},{
      initialRouteName: 'Home',
      defaultNavigationOptions:{
        title: 'Home Screen'
      }
  }

);

export default createAppContainer(navigator);

HomeScreen.js

import React from 'react';
import { View, Text, StyleSheet, Button, TouchableOpacity, Stack} from 'react-native';

const HomeScreen = props => {

    return(


        <View style={styles.container}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => props.navigation.navigate('List')}
        >
        <Text>START</Text>
        </TouchableOpacity>
      </View>

      
    );
};

ListScreen.js

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

const ListScreen = () => {



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

const styles = StyleSheet.create({

});

export default ListScreen;

我正在使用 expo-cli。请帮帮我。

【问题讨论】：

标签： reactjs react-native react-redux

【解决方案1】：

如果我们将 defaultNavigationOptions 放在 createStackNavigator 中，那么可能无法更新屏幕标题组件，因此要单独更新屏幕标题，那么我们必须指定单独的 navigationOptions。

我们可以创建一个堆栈导航器，尝试下面的方法来动态管理标题。

const HomeNavigator = createStackNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            headerShown: true,
            headerTitle: "Home"
        }
    }
})

我们还可以通过以下另一种方法从屏幕管理标题：

const LoginScreen = props => {
    return <View />
}

LoginScreen.navigationOptions = navData => {
    return {
        headerTitle: "Login",
        headerTransparent: true,
        headerShown: false
    }
}

【讨论】：

【解决方案2】：

我假设您使用的是React Navigation v5，您可以随时参考their code sample here。

如果你懒得看他们的示例，他们的代码 sn-p 如下

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}

下面是我的示例代码，您可以使用它..

StackNavigator.js -（您可以随意命名）

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import ScreenA from '../Containers/ScreenA';
import ScreenB from '../Containers/ScreenB';

const Stack = createStackNavigator();

const AppFlow = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator name="Test App">
        <Stack.Screen
          name="First"
          component={ScreenA}
          options={{headerShown: true, title: 'Screen A Title'}}
        />
        <Stack.Screen
          name="Second"
          component={ScreenB}
          options={{headerShown: true, title: 'Screen B Title'}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const MainStackNavigator = () => {
  return AppFlow();
};

export default MainStackNavigator;

First.JS - （您可以随意命名）然后在“第一”屏幕上，您可以通过以下代码导航到“第二”屏幕

 <TouchableOpacity
          style={styles.button}
          onPress={() => props.navigation.navigate('Second')}
        >
        <Text>START</Text>
        </TouchableOpacity>

【讨论】：