时间戳

首页 > 解决方案 > 将 this.state 传递给静态函数

react-native - 将 this.state 传递给静态函数

问题描述

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

在 ?中设置 headerTitle 的最佳方法是static navigationOptions什么？我相信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,
  }
}

标签： react-native

解决方案

所以我没有使用反应导航标题我禁用它并使用我自己的cutsom，

这是我的 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} />
)

有了这个，你就有足够的能力用标题做任何你想做的事情。

希望能帮助到你。随时怀疑。

推荐阅读