0

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

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

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

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

谢谢你的帮助。

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

2 回答 2

0

你检查过 Native Starter Kit吗？

这可能会帮助你。

于 2016-12-12T06:12:51.990 回答
0

您需要通过 mapStateToProps 从商店中读取它

const mapStateToProps = state => ({
   username: state.username, //for example
   navigation: state.cardNavigation,
});
于 2016-12-14T19:16:31.320 回答