美文网首页React Native
React Native Redux入门

React Native Redux入门

作者: 一亩三分甜 | 来源:发表于2019-07-01 16:51 被阅读0次

    运行官网Redux Demo,点击Increment一直失效,

    WechatIMG1115.png
    0.gif

    更改react版本"react":"^16.3.0-alpha.1"改为"react":"16.5.0"能运行成功。

    WX20190625-221327@2x.png
    1.gif

    使用Redux传值实时render。

    import * as React from 'react';
    import { Button, Text, View, StyleSheet } from 'react-native';
    import { Provider, connect } from 'react-redux';
    import { createAppContainer, createStackNavigator } from 'react-navigation';
    import { createStore, combineReducers } from 'redux';
    import WelcomeScreen from './WelcomeScreen';
    
    // A very simple reducer
    function counter(state, action) {
      if (typeof state === 'undefined') {
        return 0;
      }
      switch (action.type) {
        case 'INCREMENT':
          return state + 1;
        case 'DECREMENT':
          return state - 1;
        default:
          return state;
      }
    }
    // A very simple store
    let store = createStore(combineReducers({ count: counter }));
    class Count extends React.Component {
      render() {
        return <Text>Count: {this.props.value}</Text>;
      }
    }
    // A screen!
    class Counter extends React.Component {
      static navigationOptions = {
        title: 'Counter!',
      };
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.paragraph}>{this.props.count}</Text>
            <Button
              title="Increment"
              onPress={() => this.props.dispatch({ type: 'INCREMENT' })}
            />
            <Button
              title="Decrement"
              onPress={() => this.props.dispatch({ type: 'DECREMENT' })}
            />
    
            <Button
              title="Go to static count screen"
              onPress={() => this.props.navigation.navigate('WelcomeScreen')}
            />
          </View>
        );
      }
    }
    // Another screen!
    class StaticCounter extends React.Component {
      static navigationOptions = {
        title: `Same number, wow!`,
      };
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.paragraph}>{this.props.count}</Text>
          </View>
        );
      }
    }
    // Connect the screens to Redux
    let CounterContainer = connect(state => ({ count: state.count }))(Counter);
    let StaticCounterContainer = connect(state => ({ count: state.count }))(StaticCounter);
    let WelcomeScreenContainer = connect(state => ({count:state.count}))(WelcomeScreen);
    // Create our stack navigator
    let RootStack = createStackNavigator({
      Counter: CounterContainer,
      StaticCounter: StaticCounterContainer,
      WelcomeScreen:WelcomeScreenContainer
    });
    // And the app container
    let Navigation = createAppContainer(RootStack);
    // Render the app container component with the provider around it
    export default class App extends React.Component {
      render() {
        return (
          <Provider store={store}>
            <Navigation />
          </Provider>
        );
      }
    }
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ecf0f1',
        padding: 8,
      },
      paragraph: {
        margin: 24,
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
      },
    });
    

    存储在redux中的值count传递到下一个页面WelcomeScreen。

    1.gif

    Demo地址。

    相关文章

      网友评论

        本文标题:React Native Redux入门

        本文链接:https://www.haomeiwen.com/subject/hlatcctx.html