如何使用 nativebase 访问存储状态答案

【问题标题】：How do I access store state using nativebase如何使用 nativebase 访问存储状态
【发布时间】：2016-12-09 14:59:44
【问题描述】：

我试图找到很好的例子，但我无法找到解决方案。

我正在使用 nativebase 来学习 React Native，我想知道如何从商店访问状态。现在我有一个页面使用调度在商店中设置“用户名”。我知道它在那里并且有价值。

这部分工作正常。但是我找不到有关如何在组件上订阅此状态的示例。

为什么我可以将导航视为道具而不是用户名？

感谢您的帮助。

这是我项目的一个基本组件（使用 nativebase）如下所示：

import React, { Component } from 'react';
import { Image } from 'react-native';
import { connect } from 'react-redux';
import { Container, Content, Button, View, H3, Header, Title, Icon, Text } from 'native-base';

import { openDrawer } from '../../actions/drawer';
import myTheme from '../../themes/base-theme';
import styles from './styles';

import { actions } from 'react-native-navigation-redux-helpers';

const {
  replaceAt,
} = actions;

class SamplePage extends Component { // eslint-disable-line

  replaceAt(route) {
    this.props.replaceAt('register', { key: route }, this.props.navigation.key);
  }

  render() {
    // console.log(this.props.username); <-- returns empty (not null or undefined)
    // console.log(this.props.navigation); <-- returns an object
    return (
      <Container theme={myTheme}>

            <Header>
                <Title>Sample Page</Title>
                <Button transparent onPress={() => this.replaceAt('register')}>
                    <Icon name="ios-arrow-back" />
                </Button>
            </Header>

            <Content style={styles.content}>
              <Text style={styles.heading}>
                Eiusmod tempor incididunt
              </Text>
                <Text style={styles.text}>
                  Lorem ipsum dolor sit amet, consectetur.
                </Text>

            </Content>
        </Container>
    );
  }
}

function bindActions(dispatch) {
  return {
    replaceAt: (routeKey, route, key) => dispatch(replaceAt(routeKey, route, key))
  };
}

const mapStateToProps = state => ({
  navigation: state.cardNavigation,
});

export default connect(mapStateToProps, bindActions)(SamplePage);

【问题讨论】：

在mapStateToProps 中添加username ?
嗨 Azium，这是一个例子。我在真实组件上有这个。我有两个组件。一个用于登录（为用户名状态设置操作），另一个为空，在我设置状态后加载。
我想我明白了。我必须先组合减速器。

标签： react-native redux native-base

【解决方案1】：

你检查Native Starter Kit了吗？

这可能会对你有所帮助。

【讨论】：

【解决方案2】：

您需要通过 mapStateToProps 从存储中读取它

const mapStateToProps = state => ({
   username: state.username, //for example
   navigation: state.cardNavigation,
});

【讨论】：