TabBariOS and TabNavigator for ReactNative
ReactNaive related articles
1. React Native Chinese
2. GitHub code address
3. ReactNaive CSS and Flex layout
4. Basic components of ReactNative
5. React Naive ScrollView and ListView
6. React Native navigation components NavigatorIOS and Navigator
7. TabBariOS and TabNavigator for ReactNative
Note: This paper mainly summarizes some simple grammar of ReactNative, and most of the content is summarized from Yuan Dasen’s article
rendering
A TabBarIOS.
- Bottom option bar, not cross-platform, only iOS
- Add the following code to bring up the bottom option bar
return (
<TabBarIOS></TabBarIOS>
)
Copy the code1. Related attributes
barTintColor='yellow'// The background color of the TAB bar tintColor='#ed7f30'// unselectedItemTintColor= for the currently selected label icon'#a19a9a'// The current color of the label icon is not selected. Valid only on iOS 10 or later, always ={false} // A Boolean value that determines whether the TAB bar needs to be semi-transparent // default istrue, have transparent effectCopy the codeIi. TAB:TabBarIOS.Item
TabBarIOS: simply represents an option bar at the bottomTabBarIOS.Item: represents each TABTabBarIOS.ItemA View must be wrapped as a View to switch from by clicking the tabBar button
<TabBarIOS.Item title='home'
icon={{uri:'btn_home_normal'}}
selectedIcon={{uri:'btn_home_selected'}}
onPress={()=>{
this.setState({
selectedIndex:0
})
}}
selected={this.state.selectedIndex == 0}
>
<View style={{backgroundColor:'red', flex:1}}/>
</TabBarIOS.Item>
Copy the code1. Common attributes
badge string, number
badge='我'Badge ={12} // display a red bubble in the upper right corner of the icon, accept string and number type title string // display the title text below the icon. If a systemIcon property is defined, this property is ignored. Icon image.proptypes. source // Specifies a custom icon for the current tag. If a systemIcon property is defined, this property is ignored. SelectedIcon image.proptypes.source // Custom icon to display when the tag is selected. If a systemIcon property is defined, this property is ignored. If an icon is defined without this property, the icon will be colored blue when selected. onPressfunction// Called when this tag is selected. You should modify the component's state so that the Selected property istrueSelected bool // This property determines whether the subview is visible. If you see a blank page, it is likely that none of the tags systemIcon enum('bookmarks'.'contacts'.'downloads'.'favorites'.'featured'.'history'.'more'.'most-recent'.'most-viewed'.'recents'.'search'.'top-rated') // Some predefined system ICONS. Note that if you use this property, the title and custom icon will be overwritten with the system-defined value.Copy the code- If you set tabBarItem’s Selected to true, it will automatically jump to the corresponding screen
- Note: The selected property of tabBarItem cannot be killed. We can create a corner marker to record which corner is currently selected
- Listen for tabBarItem clicks and modify the Selected property
- Sample code
exportdefault class App extends Component<{}> { constructor(props){ super(props) this.state = { selectedIndex:0 } } // When a component is about to be displayed, it automatically calls Render, rendering the componentrender() {
return (
<TabBarIOS tintColor='#ed7f30'>
<TabBarIOS.Item title='home'
icon={{uri:'btn_home_normal'}}
selectedIcon={{uri:'btn_home_selected'}}
badge='我'
onPress={()=>{
this.setState({
selectedIndex:0
})
}}
selected={this.state.selectedIndex == 0}
>
<View style={{backgroundColor:'red', flex:1}}/>
</TabBarIOS.Item>
<TabBarIOS.Item title='live'
icon={{uri:'btn_column_normal'}}
selectedIcon={{uri:'btn_column_selected'}}
badge={12}
onPress={()=>{
this.setState({
selectedIndex:1
})
}}
selected={this.state.selectedIndex == 1}
>
<View style={{backgroundColor:'yellow', flex:1}}/>
</TabBarIOS.Item>
</TabBarIOS>
)
}
}
Copy the code3. TabNavigator
- TabBarIOS is only available on iOS. If you need a TabBar on Android, you can’t use TabBarIOS.
- TabNavigator: A cross-platform TabBar third-party framework component available for iOS and Android
- TabNavigator address
1. Install and import
1-1. Install third-party frameworks
yarn add react-native-tab-navigator
Copy the code1-2. Import the framework
import TabNavigator from 'react-native-tab-navigator';
Copy the code2. Common TabNavigator properties
| attribute | The default value | type | describe |
|---|---|---|---|
| sceneStyle | inherited | object (style) | Define the rendered scene |
| tabBarStyle | inherited | object (style) | Define styles for TabBar |
| tabBarShadowStyle | inherited | object (style) | Define shadow styles for tabbars |
| hidesTabTouch | false | boolean | Disable onPress for the TAB |
3. Tabnavigator. Item Common properties
| attribute | The default value | type | describe |
|---|---|---|---|
| renderIcon | none | function | TAB icon |
| renderSelectedIcon | none | function | TAB to check the status icon |
| badgeText | none | string or number | Icon displayed in the upper right corner |
| title | none | string | Tabbar title |
| titleStyle | inherited | style | Heading styles |
| selectedTitleStyle | inherited | style | Check the status header style |
| tabStyle | inherited | style | TAB style |
| hidesTabTouch | false | boolean | Whether to select the tabbar |
| onPress | none | function | Click method of the TAB |
| allowFontScaling | false | boolean | Allows font scaling for headings |
- Use the sample
render() {
return (
<TabNavigator>
<TabNavigator.Item title='home'
selected={this.state.selectedIndex == 0}
titleStyle={{color:'#9d9d9d'}}
selectedTitleStyle={{color:'#ed7f30'}}
badgeText='home'
allowFontScaling={false}
renderIcon={()=>
<Image source={{uri:'btn_home_normal'}} style={styles.iconStyle}/>
}
renderSelectedIcon={()=>
<Image source={{uri:'btn_home_selected'}} style={styles.iconStyle}/>
}
onPress={()=>
this.setState({
selectedIndex:0
})
}
>
<View style={[styles.viewStyle, {backgroundColor:'red'}]}> <Text> home </Text> </View> </ tabnavigator.item > < tabnavigator.item title='I'
selected={this.state.selectedIndex == 1}
titleStyle={{color:'#9d9d9d'}}
selectedTitleStyle={{color:'#ed7f30'}}
badgeText={10}
renderIcon={()=>
<Image source={{uri:'btn_user_normal'}} style={styles.iconStyle}/>
}
renderSelectedIcon={()=>
<Image source={{uri:'btn_user_selected'}} style={styles.iconStyle}/>
}
onPress={()=>
this.setState({
selectedIndex:1
})
}
>
<View style={[styles.viewStyle, {backgroundColor:'green'}]} > < Text > I < / Text > < View > < / TabNavigator Item > < / TabNavigator >)}}Copy the code