javascript - 使用react-native的自定义选项卡

Question

我已经在react-native中创建了自定义选项卡，但无法选择选项卡。我已经初始化了所选选项卡的状态，但不知道在哪里设置状态。

这是我的代码:

'use strict';

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View
} from 'react-native';
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
var bg = require('image!bg');

class TabView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'list',
      selectedTab: 'map'
    };
  }
  render() {

    return (
      <View style={styles.container}>
        <Image style={styles.bg} source={bg} />
        <View style={styles.tabView}>
          <View style={[styles.listView,styles.selectedView]}>
            <Text>List View</Text>
          </View>
          <View style={[styles.listView,{}]}>
            <Text>Map View</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bg: {
        position: 'absolute',
        left: 0,
        top: 0,
        width: windowSize.width,
        height: windowSize.height
    },
  tabView: {
    flexDirection: 'row',
    //bottom: 200,
    borderWidth:2,
    borderColor:'rgba(4, 193, 3,1)',
    borderRadius: 5,
    marginHorizontal: 20,
    marginTop: 50
  },
  listView: {
    flex: 2,
    padding:7,
    alignItems:'center'
  },
  mapView: {
    flex: 2,
    padding:7,
    alignItems:'center'
  },
  selectedView: {
    backgroundColor:'rgba(4, 193, 3,1)',
    color: 'white'
  }
});

module.exports = TabView

我只是想知道我应该在哪里添加检查，以便我可以在所选选项卡中做出改变

任何帮助将不胜感激。

Answer 1

请查看此处的代码，了解如何完成

const Tab = (props) => {
  let style = props.isSelected && styles.selectedTab || styles.normalTab;

  return (
    <View style={style}>
      <TouchableHighlight onPress={() => props.onTabPress(props.id)}>
        <Text>{props.title}</Text>
      </TouchableHighlight>
    </View>
  )
}


class TabsView extends Component {
  constructor(props) { 
    super(props)
    this.state = {
      selectedTab: 'one'
    }
  }

  render() {
    return (
      <View>
         <Tab onTabPress={this.onSelectTab.bind(this)} title="One" id="one" isSelected={this.state.selectedTab == "one"}/>
         <Tab onTabPress={this.onSelectTab.bind(this)} title="Two" id="two" isSelected={this.state.selectedTab == "two"}/>
      </View>
    )
  }

  onSelectTab(selectedTab) {
    this.setState({ selectedTab })
  }
}

上面的代码将您的组件分为两部分，逻辑部分(TabsView)和愚蠢的表示部分(Tab)

逻辑处理 clickHandler (onSelectTab)，它作为 prop (onTabPress) 传递给哑 (Tab) 组件。