0

私はそれについて良い例を見つけようとしていますが、解決策を見つけることができません。

反応ネイティブを学習するためにネイティブベースを使用していますが、ストアから状態にアクセスする方法を知りたいです。現在、ディスパッチを使用してストアに「ユーザー名」を設定するページがあります。私はそれがそこにあり、価値があることを知っています。

この部分は正常に動作しています。しかし、コンポーネントでこの状態をサブスクライブする方法の例が見つかりません。

ナビゲーションは小道具として表示されますが、ユーザー名では表示されないのはなぜですか?

助けてくれてありがとう。

これは、私のプロジェクトの基本的なコンポーネント (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

mapStateToProps を介してストアから読み取る必要があります

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