使用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）組件。

Answer 2

我只想知道應該在哪里添加支票，以便可以在所選標簽中有所作為

在render方法中，它應該

例：

render() {
  let FirstTabStyles = Object.assign(
      defaultTabStyles,
      (isFirstSelected && selectedStyles || {})
  )

  let SecondTabStyle = Object.assign(
      defaultTabStyles,
      (isSecondSelected && selectedStyles || {})
  )

  return (
     <View>
       <FirstTab style={FirstTabStyle} />
       <SecondTab style={SecondTabStyle} />
    </View>
  )
}