如何推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>