通过单击 React Native 中的选项卡动态更改标题文本并显示/隐藏左/右标题按钮？答案

【问题标题】：Change Header Text and show/hide left/right header buttons dynamically with click on Tabs in React Native?通过单击 React Native 中的选项卡动态更改标题文本并显示/隐藏左/右标题按钮？
【发布时间】：2019-11-22 12:58:10
【问题描述】：

我在我的 react native 项目中使用标签。我想更新标题文本并显示/隐藏选项卡上的左、右按钮单击反应原生。

我将这段代码用于选项卡导航和 StackNavigator 用于选项卡屏幕：

const TabScreen = createMaterialTopTabNavigator(
  {
    AllChallenges: {
      screen: AllChallenges,
      navigationOptions: {
        title: 'All CHALLENGES',
        fontFamily: Fonts.medium,
        header: null,
      }
    },
    YourProgress: {
      screen: YourProgress,
      navigationOptions: {
        title: 'YOUR PROGRESS',
        fontFamily: Fonts.medium,
        header: null,
      }
    },
  },
  {
    tabBarPosition: 'top',
    header: null,
    swipeEnabled: false,
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: 'rgb(94,94,95)',
      inactiveTintColor: 'rgb(221,221,221)',
      style: {
        backgroundColor: '#ffffff',
        height: 40,
      },
      labelStyle: {
        marginTop: 5,
        textAlign: 'center',
        fontFamily: Fonts.medium,
        fontSize: 12,
      },
      indicatorStyle: {
        borderBottomColor: 'rgb(32,186,113)',
        borderBottomWidth: 2,
      },
    },
  }
);

//making a StackNavigator to export as default
const Challenges = createStackNavigator({
  TabScreen: {
    screen: TabScreen,
    header: null,
    navigationOptions: ({ navigation }) => {
      // ListAisle.headerList()
      return {
        title: "CHALLENGES",
        headerTintColor: 'white',
        headerTitleStyle: {
          textAlign: 'center',
          flexGrow: 2,
          alignSelf: 'center',
          marginLeft: 12,
          fontFamily: Fonts.summerNormal,
          fontSize: 25,
        },
        headerStyle: {
          backgroundColor: '#ff6500'
        },
        tabBarOnPress: () => Alert.alert('hello')
      }
    },
  },
});

在下面点击复选框按钮的屏幕截图中，我想在标题中显示删除按钮

知道如何更新标题并显示隐藏标题按钮吗？

enter image description here

【问题讨论】：

为什么不制作自定义标题？它更容易

标签： react-native react-native-navigation react-native-tabnavigator react-native-tab-view

【解决方案1】：

我花了很多时间解决这个问题...

最后我找到了一个解决方案来更改标题文本并在选项卡堆栈中获取标题响应。

在 YourProgress 类构造函数中添加了这一行：

this.props.navigation.navigate('AllChallenges', { title: 'Challenge',isEditClick: 0})

在挑战类中，您必须在 NavigationOptions 中添加此代码以检查参数，然后使用这些参数进行设置：

const titles =navigation.state.routes[navigation.state.index].params != null ? navigation.state.routes[navigation.state.index].params.title : 'Challenge'

如果您想通过单击 YourProgress 选项卡标题在 YourProgress Stack 中获得价值，然后在按下编辑按钮时添加此代码：

this.props.navigation.navigate('AllChallenges', { title: 'Challenge',isEditClick: 1)

您可以在componentDidUpdate函数的YourProgress屏幕中获取isEditClick值1：

  componentDidUpdate() {
    const { navigation } = this.props;
    var isEditValue = this.props.navigation.state.params != null ? this.props.navigation.state.params.isEditClick : ''
})
  }

【讨论】：