运行官网Redux Demo,点击Increment一直失效,
WechatIMG1115.png0.gif
更改react版本"react":"^16.3.0-alpha.1"改为"react":"16.5.0"能运行成功。
WX20190625-221327@2x.png1.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',
},
});
网友评论