2

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

我将此代码用于选项卡导航和 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')
      }
    },
  },
});

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

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

在此处输入图像描述

4

1 回答 1

0

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

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

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

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

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

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

如果您想在单击 YourProgress Tabs Header 时在 YourProgress Stack 中获得价值，然后在 Edit Button press 上添加此代码：

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 : ''
})
  }
于 2019-12-04T12:38:28.090 回答