Question

我在我的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

Answer 1

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

最后，我找到了一种更改标题文本并在Tabs Stack中获取标题响应的解决方案。

在YourProgress类构造函数中添加了以下行：

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

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

如果要通过单击YourProgress Tabs标头在YourProgress堆栈中获取价值，然后在按Edit按钮时添加以下代码：

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

您可以在componentDidUpdatefunction的YourProgress屏幕中获得isEditClick值1：

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

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

1 个答案: