Question

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

我正在使用nativebase进行学习反应本机，我想知道如何从商店访问状态。现在我有一个页面，使用dispatch在商店中设置“用户名”。我知道它在那里，它有价值。

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

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

感谢您的帮助。

这个项目的基本组件（使用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);

Answer 1

您是否检查了Native Starter Kit？

这可能会对你有帮助。

Answer 2

您需要通过mapStateToProps

从商店阅读

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

如何使用nativebase访问存储状态

2 个答案: