更新小圆点+1

Author: CodeRabbitYu

Reducers/RootReducer.js

@@ -1,7 +1,7 @@
-import { combineReducers } from 'redux';
-import nav from './StackReducer';
-
-//取决于这里你加入了多少 reducer
-export default RootReducer = combineReducers({
-    nav
-});
+// import { combineReducers } from 'redux';
+// import nav from './StackReducer';
+//
+// //取决于这里你加入了多少 reducer
+// export default RootReducer = combineReducers({
+//     nav
+// });

Reducers/StackReducer.js

@@ -4,6 +4,8 @@
 //     let nextState;
 //     switch (action.type) {
 //         default:
+//             // console.log(state);
+//             // console.log(action);
 //             nextState = MyApp.router.getStateForAction(action, state);
 //             break;
 //     }

Test/App.js

@@ -8,33 +8,68 @@ import {
     Text,
     View,
     Image,
-    Dimensions
+    Dimensions,
+    DeviceEventEmitter
 } from 'react-native';
 
 const { width , height} = Dimensions.get('window');
 
 import { addNavigationHelpers, NavigationActions } from "react-navigation";
 import {Provider}from 'react-redux';
 
+// global.badgeNumber=11;
 
 // import configureStore from '../Store/configureStore';
 // const store = configureStore();
 
 import Routers from './Routers';
 
 export default class App extends Component {
+    state={
+        badgeNumber:11
+    }
+    componentDidMount(){
+        this.subscription = DeviceEventEmitter.addListener('badge',(number)=>{
+            // alert(number)
+            this.setState({
+                badgeNumber:number
+            })
+        });
+    };
 
+    componentWillUnmount(){
+        this.subscription.remove();
+    };
     render() {
         const { dispatch, nav } = this.props;
         // console.log(dispatch);
 
+
+
         // const navigation = addNavigationHelpers({
         //     dispatch,
         //     state: nav
         // });
         // 如果集成了redux，screenProps这个属性就不能直接使用了。
         // 应该是要通过action里面处理，这里只提供思路不做完善了
-        return (
+        // return (
+        //     <Provider>
+        //     <View style={{flex:1}}>
+        //         <Routers screenProps={{themeColor:'yellow'}}/>
+        //         <View style={{position:'absolute',
+        //             width:width,height:20,bottom:29}}>
+        //             <View style={{height:20,width:20,borderRadius:10,
+        //                 backgroundColor:'red',marginLeft:width/3-55}}>
+        //                 <Text style={{backgroundColor:'transparent',
+        //                     alignSelf:'center',justifyContent:'center'}}>
+        //                     {this.state.badgeNumber}
+        //                 </Text>
+        //             </View>
+        //         </View>
+        //     </View>
+        //     </Provider>
+        // );
+        return(
             <View style={{flex:1}}>
                 <Routers screenProps={{themeColor:'yellow'}}/>
                 <View style={{position:'absolute',
@@ -43,15 +78,12 @@ export default class App extends Component {
                         backgroundColor:'red',marginLeft:width/3-55}}>
                         <Text style={{backgroundColor:'transparent',
                             alignSelf:'center',justifyContent:'center'}}>
-                            11
+                            {this.state.badgeNumber}
                         </Text>
                     </View>
                 </View>
             </View>
-        );
-        // return(
-        //     <Routers screenProps={{themeColor:'yellow'}}/>
-        // )
+                )
     }
 }
 const styles = StyleSheet.create({

Test/Routers.js

@@ -132,7 +132,7 @@ const MyTab = TabNavigator({
 
 
 // 初始化StackNavigator
-export default MyApp = StackNavigator({
+export default  MyApp = StackNavigator({
     // 将TabNavigator包裹在StackNavigator里面可以保证跳转页面的时候隐藏tabbar
     MyTab:{
         screen:MyTab,
@@ -172,9 +172,9 @@ const TabOptions = (tabBarTitle,normalImage,selectedImage,navTitle) => {
 // const AppWithNavigationState = ({ dispatch, nav }) => (
 //     <MyApp navigation={addNavigationHelpers({ dispatch, state: nav })}/>
 // );
-
+//
 // const mapStateToProps = state => ({
 //     nav: state.nav,
 // });
-//
+
 // export default connect(mapStateToProps)(AppWithNavigationState);

Test/Test2.js

@@ -10,20 +10,27 @@ import {
     StyleSheet,
     Text,
     View,
-    Image
+    Image,
+    DeviceEventEmitter
 } from 'react-native';
 
 const GankIcon = require('../resources/Gank.png');
 const ShiTuIcon = require('../resources/ShiTu.png');
 
+let badgeNumber = 11;
+
 export default class Test2 extends Component {
 
     static navigationOptions = ({navigation,screenProps}) => ({
         // 这里面的属性和App.js的navigationOptions是一样的。
         tabBarOnPress:(({ route, index },jumpToIndex)=>{
             // console.log(route);
             // alert(index);
-            // alert(screenProps.themeColor)
+            // console.log(this.props);
+            // console.log(screenProps);
+            // alert(badgeNumber);
+
+            // DeviceEventEmitter.emit('badge',badgeNumber++);
             jumpToIndex(index);
         }),
         // 下面就是文章中修改主题色的方法
@@ -48,6 +55,9 @@ export default class Test2 extends Component {
         ),
     })
 
+    componentWillUnmount(){
+        this.subscription.remove();
+    };
     componentDidMount(){
         // 通过在componentDidMount里面设置setParams将title的值动态修改
         this.props.navigation.setParams({
@@ -62,6 +72,7 @@ export default class Test2 extends Component {
     }
 
     render() {
+        console.log(this.props);
         return (
             <View style={styles.container}>
                 <Text style={styles.welcome}>