React native 使用React Native中的单击选项卡动态更改标题文本和显示/隐藏左/右标题按钮?
我正在我的react原生项目中使用选项卡。我想更新标题文本,并在react native中显示/隐藏选项卡上的左、右按钮 我将此代码用于选项卡导航和StackNavigator用于选项卡屏幕: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
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 : ''
})
}
你为什么不做一个自定义标题?这容易多了