Question

我试图将标题栏中的headerTitle设置为登录用户的用户名：this.state.username。但是，当我尝试将navigationOptions设置为一个函数时，我无法通过当前状态。

在static navigationOptions内设置headerTitle的最佳方法是什么？我相信navigationOptions必须保持静态，否则将不会显示任何内容。

class profile extends React.Component {
    static navigationOptions = 
    {
        headerTitle: this.state.username
    };

const TabStack = createBottomTabNavigator(
  {
    Home: {
      screen: home,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="home" size={25} style={{ color: tintColor }} />
        ),
      },


    },
    Explore: {
      screen: explore,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="search" size={25} style={{ color: tintColor }} />
        ),
      }
    },
    Profile: {
      screen: profile,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="person" size={25} style={{ color: tintColor }} />
        ),
      }
    },
    Create: {
      screen: createCompetition,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="add" size={25} style={{ color: tintColor }} />
        ),
      }
    },
    Payment: {
      screen: payment,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="attach-money" size={25} style={{ color: tintColor }} />
        ),
        title: 'Payment',

      }
    }
  },
  {
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: 'black',
      style: { backgroundColor: 'white', }
    },

  },
)

TabStack.navigationOptions = ({ navigation, screenProps }) => {
  const childOptions = getActiveChildNavigationOptions(navigation, screenProps)
  return {
    title: childOptions.title,
    headerLeft: childOptions.headerLeft,
    headerRight: childOptions.headerRight,
  }
}

Answer 1

因此，与其使用React Navigation Header禁用它，还使用了我自己的摘要，

这是我的Header.js：

import React, {Fragment, Component} from 'react';
import {View, Text, TouchableOpacity, Image, SafeAreaView} from 'react-native';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import {headerStyles} from '../style/headerStyles';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          paddingBottom: hp('3.125%'),
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <View style={{opacity: 0}}>
          <Image source={require('../assets/images/crossIcon.png')} />
        </View>
        <View style={{flexShrink: 1}}>
          <Text style={headerStyles.headerText}>{this.props.title}</Text>
        </View>
        <View style={{left: -20, paddingLeft: 10, marginLeft: 10}}>
          <TouchableOpacity
            style={headerStyles.imageView}
            onPress={() => this.props.navigation.goBack()}>
            <Image
              style={{height: 15, width: 15}}
              source={require('../assets/images/crossIcon.png')}
            />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

，您可以导入任何组件，例如：

import Header from '../components/Header';

return(
 <Header title={this.state.userName} navigation={this.props.navigation} />
)

有了这个，您有足够的能力执行标头所需的任何操作。

希望有帮助。毫无疑问。

Answer 2

我假设您正在使用react-navigation，建议您在组件中设置一个导航参数，然后在navigationOptions中获取该参数。

登录后执行以下操作：

navigation.setParams({ headerTitle: this.state.userName})

，然后在您已经具有导航功能的navigationOptions内部：

return { title: navigation.getParam('headerTitle') }

将this.state传递给静态函数

2 个答案: