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>

如何在ReactNative中

1 个答案: