Как нажимать View в Tabbar для android в ReactNative

Question

У меня есть следующий код с двумя вкладками, у меня есть страница View1.js и страница View2.js. Я хочу нажать эти View1 и View2 на панели вкладок.

Вот мой код.

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

var Signin=require('../signin') 
var Registration=require('../registration') 
var View1=require('./view1') 
var View2=require('./view2') 
import localStyles from './styles.js' 
import componentStyles from '../styles.js' 
import TabNavigator from 'react-native-tab-navigator'; 
class Main extends React.Component{ 

constructor(props) { 
super(props); 
this.state = { 
    selectedTab: 'view1' 
    }; 
} 
render(){ 
const { selectedTab } = this.state; 
return (
<View style={styles.container}> 
    <TabNavigator> 
    <TabNavigator.Item 
    selected={this.state.selectedTab == 'view1'} 
    title="SIGNIN" 
    onPress={() => this.setState({selectedTab:'view1' })}> 
    {View1} 
    </TabNavigator.Item> 
    <TabNavigator.Item 
    selected={this.state.selectedTab =='view2'} 
     title="registration" 
     onPress={() => this.setState({selectedTab:'view2' })}> 
     {View2} 
    </TabNavigator.Item> 

     </TabNavigator> 
     </View> 
    ) 
} 

}

const styles = StyleSheet.create(localStyles) 
export default Main 

И мой view1.js имеет следующий код:

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

import localStyles from './styles.js' 
import componentStyles from '../styles.js' 

var view1 = React.createClass({ 
    render(){ 
    return (


    <View> 
    <Text> tab1</Text> 
    </View> 


    ) 
    }, 
}) 

    const styles = StyleSheet.create(localStyles) 


export default view1 

И мой view2.js имеет следующий код:

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

import localStyles from './styles.js' 
import componentStyles from '../styles.js' 

var view2 = React.createClass({ 
    render(){ 
    return (


    <View> 
    <Text> tab2</Text> 
    </View> 


    ) 
    }, 
}) 

    const styles = StyleSheet.create(localStyles) 


export default view2 

Answer 1

Этот примером является копия/вставка примера, взятого непосредственно из react-native-tab-navigtor github.

Вам необходимо заменить {homeView} и {profileView} на регистрацию и регистрацию.

<TabNavigator> 
    <TabNavigator.Item 
    selected={this.state.selectedTab === 'home'} 
    title="Home" 
    renderIcon={() => <Image source={...} />} 
    renderSelectedIcon={() => <Image source={...} />} 
    badgeText="1" 
    onPress={() => this.setState({ selectedTab: 'home' })}> 
    {homeView} 
    </TabNavigator.Item> 
    <TabNavigator.Item 
    selected={this.state.selectedTab === 'profile'} 
    title="Profile" 
    renderIcon={() => <Image source={...} />} 
    renderSelectedIcon={() => <Image source={...} />} 
    renderBadge={() => <CustomBadgeView />} 
    onPress={() => this.setState({ selectedTab: 'profile' })}> 
    {profileView} 
    </TabNavigator.Item> 
</TabNavigator>