javascript - 将道具传递给标题组件

Question

在我的反应原生移动应用程序中，我具有登录功能和注册功能。用户使用 Firebase 身份验证使用电子邮件和密码登录。登录后，我需要能够在标题组件中显示用户名。但在我的应用程序中，我使用的是堆栈导航器、抽屉导航器和底部选项卡导航器。因此，对于导航，我创建了名为Router的单独 js 文件。

const ThirdNavigator = createBottomTabNavigator({
    LoginForm,
    RegisterForm
});

const SecondNavigator = createDrawerNavigator({
    Profile: {
      screen: TaskList,
      navigationOptions: ({ navigation }) => ({
        title: 'Your Schedule'
      })
    }
}, {
    // drawerType: 'slide', 
});

const MainNavigator = createStackNavigator({
    Open: { screen: OpenWindow },
    Home: {
        screen: ThirdNavigator,
        navigationOptions: ({ navigation }) => ({
            title: 'Sign In',
            headerStyle: { backgroundColor: '#0680EC', height: 45 },
            headerLeft: null,
            headerRight: null
        })
    },
    Profile: {
        screen: SecondNavigator,
        navigationOptions: ({ navigation }) => ({
          title: 'Your Schedule',
          headerStyle: { backgroundColor: '#0680EC', height: 45 },
          headerLeft: <Toggle navigation={navigation} />,
          headerRight: <Notification logOutUser={logOutUser()} />
        })
    }
});


const Router = createAppContainer(MainNavigator);

export default connect(null, { emailChanged, passwordChanged, loginUser, logOutUser })(Router);

据我所知，当我使用 react-redux 连接功能时，我无法在主 UI 组件中使用导航选项。所以，我不得不在Router中使用导航选项。我的标头是一个名为Notification.js的单独组件。

class Notification extends Component {
  state = {
      user_name: 'label',
      loading: true,
      level: ''
  };


  onSelectOpt(idx, value) {
      this.setState({ level: value });
      if (value === "Logout") {
        firebase.auth().signOut();
      }
  }

  showLogout() {
      return (
          <ModalDropdown options={[this.state.user_name, 'Logout']} onSelect={(idx, value) => this.onSelectOpt(idx, value)} style={{ width: '100%', height: 30, justifyContent: 'center', paddingLeft: 20 }} dropdownStyle={{ width: 100, height: 82, paddingBottom: 0 }} dropdownTextStyle={{ color: '#000', fontSize: 15 }} dropdownTextHighlightStyle={{ fontWeight: 'bold' }} >
            <View style={{ height: 30, width: 60, alignItems: 'center', paddingRight: 20 }}>
                <Image
                    source={require('../pics/logout.png')}
                    style={styles.downStyle}
                />
            </View>
        </ModalDropdown>
      );
  }

  render() {
      return (
          <View style={{ flexDirection: 'row', paddingRight: 10 }}>
              <View style={{ height: 30, width: 60, backgroundColor: 'transparent' }}>
                  {this.showLogout()}
              </View>
          </View>
      )
   }
}


const styles = {
    imageStyle: {
        width: 25,
        height: 25
    },
    buttonStyle: {
        marginLeft: 5,
        marginRight: 7
    },
    spinnerStyle: {
       alignSelf: 'stretch',
       borderRadius: 5,
       marginLeft: 20,
       marginRight: 20,
       borderRadius: 60,
       paddingTop: 10,
       paddingBottom: 10,
       height: 100
    },
    downStyle: {
        width: 25,
        height: 25
    }
}

export { Notification };

我的问题是，在我从 firebase 数据库中获取用户名之后，如何将它作为道具传递给我的标题。登录后，我在主 UI 组件中调用我的操作创建者。但导航选项在Router中。因此，我正在寻找一种将获取的数据作为道具传递给 Header( Notification.js ) 的方法。

class TaskList extends Component {

  handleBackButtonClick() {
  BackHandler.exitApp();
  return true;
}

UNSAFE_componentWillMount() {
  this.props.userFetch();
  // console.log(this.props.username.name);
  BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick.bind(this));
}

componentWillUnmount() {
  BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick.bind(this));
}

UNSAFE_componentWillReceiveProps(nextProps) {
  // console.log(nextProps.username);
  if (firebase.auth().currentUser == null) {
    this.props.navigation.navigate('Home');
  }
}

render() {
  console.log(this.props);
  return (
    <View>
      <Text>Employee</Text>
      <Text>Employee</Text>
      <Text>Employee</Text>
      <Text>Employee</Text>
      <Text>Employee</Text>
      <Text>Employee</Text>
    </View>
    );
  }
}

const mapStateToProps = state => {
  const username = _.map(state.username, (val, uid) => {
    return { ...val, uid };
  });

  return { username };
}

export default connect(mapStateToProps, { userFetch })(TaskList);

我已成功从 firebase 获取数据并将其转换为主 UI 中的数组。现在我想要一种将数据传递给标头Notification.js组件的方法。请帮我想办法做到这一点。

标签： javascriptfirebasereact-native