1-4,CustomBadgeView 问题

来源:1-5 项目底部导航菜单开发

22不小了

2017-05-20

http://szimg.mukewang.com/591fcaf90001d60605620808.jpg


这是源码的部分


/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 View,
 Image,
 Navigator
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

import Boy from './Boy'
export default class simple_app extends Component {

 constructor(props){
   super(props);
   this.state={
     selectTab:'home'
   }
 }
 render() {
   return (
     <View style={styles.container}>
       <TabNavigator>
         <TabNavigator.Item
             selected={this.state.selectedTab === 'home'}
             title="Home"
             renderIcon={() => <Image source={require('./res/images/ic_polular.png')} />}
             renderSelectedIcon={() => <Image source={require('./res/images/ic_polular.png')} />}
             badgeText="1"
             onPress={() => this.setState({ selectedTab: 'home' })}>
           <View style={styles.page1}></View>
         </TabNavigator.Item>
         <TabNavigator.Item
             selected={this.state.selectedTab === 'profile'}
             title="Profile"
             renderIcon={() => <Image source={require('./res/images/ic_trending.png')} />}
             renderSelectedIcon={() => <Image source={require('./res/images/ic_trending.png')} />}
            /!* renderBadge={() => <CustomBadgeView />}*!/
             onPress={() => this.setState({ selectedTab: 'profile' })}>
           <View style={styles.page2}></View>
         </TabNavigator.Item>
       </TabNavigator>
    /* <Navigator
         initiaRoute={{
         component:Boy
         }}
         renderScene={(route,navigator)=>{
         let Component= route.component;
           return <Component navigator={navigator} {...route.params}></Component>
         }}
         ></Navigator>*/
     </View>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 page1:{
   flex:1,
   backgroundColor:'red',
 },
 page2:{
   flex:1,
   backgroundColor:'red',
 },
 page3:{
   flex:1,
   backgroundColor:'red',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});

AppRegistry.registerComponent('simple_app', () => simple_app);

写回答

1回答

CrazyCodeBoy

2017-05-20

react-native-tab-navigator支持你自定义右上角现实的小红点的视图组件,如果不需要自定义可以使用badgeText的属性即可,如果要自定义则需要你手动创建一个自定义的视图。CustomBadgeView 这个是你应该是直接从react-native-tab-navigator的说明文档中拷过来的吧,CustomBadgeView 是一个自定视图,需要自己实现呢,名字可以任意起呢。

0
4
CrazyCodeBoy
回复
xue109196
自定义一个组件作为CustomBadgeView就可以了
2017-11-07
共4条回复

React Native技术精讲与高质量上线App开发

一个真实的上线项目,一次完整的开发过程,全面掌握React Native技术

1577 学习 · 727 问题

查看课程