React native 使用React Native中的单击选项卡动态更改标题文本和显示/隐藏左/右标题按钮?

React native 使用React Native中的单击选项卡动态更改标题文本和显示/隐藏左/右标题按钮?,react-native,react-native-navigation,react-native-tabnavigator,react-native-tab-view,React Native,React Native Navigation,React Native Tabnavigator,React Native Tab View,我正在我的react原生项目中使用选项卡。我想更新标题文本,并在react native中显示/隐藏选项卡上的左、右按钮 我将此代码用于选项卡导航和StackNavigator用于选项卡屏幕: const TabScreen = createMaterialTopTabNavigator( { AllChallenges: { screen: AllChallenges, navigationOptions: { title: 'All CHA

我正在我的react原生项目中使用选项卡。我想更新标题文本,并在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')
      }
    },
  },
});
在下面点击复选框按钮的屏幕截图中,我想在标题中显示删除按钮

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


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

最后,我找到了一个解决方案来更改标题文本并在Tabs堆栈中获得标题响应

在进度类构造函数中添加了此行:

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'
如果您想通过单击进度选项卡标题在进度堆栈中获取值,请按编辑按钮添加此代码:

this.props.navigation.navigate('AllChallenges', { title: 'Challenge',isEditClick: 1)
您可以在componentDidUpdatefunction的进度屏幕中获得IsEdit单击值1:

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

你为什么不做一个自定义标题?这容易多了