React Native Navigation WIX V2 with Bottom tabNavigations
define two component class,
1. Tab1.js
2. Tab2.js
let's begin
.........................................................................................................................................................................................................................
Tab1.js
import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
class Tab1 extends Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.text}> Tab 1 </Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center'
},
text:{
fontSize:35,
}
})
export default Tab1
....................................................................................................................................................................................................................
Tab2.js
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { Navigation } from 'react-native-navigation'
class Tab2 extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}> Tab 2 </Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
text: {
fontSize: 30,
color: 'red'
}
})
export default Tab2
....................................................................................................................................................................................................................
index.js
import { Navigation } from 'react-native-navigation'
import Tab1 from './App/Tab1'
import Tab2 from './App/Tab2'
Navigation.registerComponent('tab1', ()=> Tab1)
Navigation.registerComponent('tab2', () => Tab2)
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
bottomTabs:{
children:[{
stack:{
children:[{
component:{
name:'tab1',
options:{
bottomTab:{
text:'tab1',
icon:require('./component/assets/download.png')
}
}
}
}]
}
},{
stack:{
children:[{
component:{
name:'tab2',
options:{
bottomTab:{
text:'tab2',
icon:require('./component/assets/download.png')
}
}
}
}]
}
}]
}
}
})
})
.................................................................................................................................................................................................................
No comments:
Post a Comment