Reactjs 如何在react native中将选项卡栏更改为分段控件？

我现在正在学习react native，并对它的工作方式有了新的认识。我目前正忙于一个项目，试图对其进行一些修改

项目底部有一个选项卡栏，我想将其更改为顶部的分段控件。这就是我所做的和得到的结果

带有选项卡栏的原始代码

import React, {Component} from 'react';
import {
    StyleSheet,
    TabBarIOS
} from 'react-native';
import {bind} from '../utils/utils';
import EmployeesTab from './EmployeesTab';
import SearchTab from './SearchTab';

const employeesIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

class App extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            selectedTab: 'employees'
        };
        bind(this)('_searchOnPress', '_employeesOnPress');
    }

    _employeesOnPress() {
        this.setState({
            selectedTab: 'employees'
        })
    }

    _searchOnPress() {
        this.setState({
            selectedTab: 'search'
        })
    }

    render() {
        return (
            <TabBarIOS
                selectedTab={this.state.selectedTab}>
                <TabBarIOS.Item
                    title="Employees"
                    selected={this.state.selectedTab === 'employees'}
                    icon={{uri: employeesIcon, scale: 3}}
                    onPress={this._employeesOnPress}>
                    <EmployeesTab />
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    title="Search"
                    selected={this.state.selectedTab === 'search'}
                    systemIcon="search"
                    onPress={this._searchOnPress}>
                    <SearchTab />
                </TabBarIOS.Item>
            </TabBarIOS>
        )
    }
}

import React，{Component}来自'React'；
进口{
样式表，
塔巴里奥斯
}从“反应本机”；
从“../utils/utils”导入{bind}；
从“/EmployeesTab”导入EmployeesTab；
从“./SearchTab”导入SearchTab；
const employeesIcon='数据：image/png；base64，一个中国政府的一个中国政府的一个中国政府的一个中国政府的一个中国政府的一个中国政府的一个中国政府的一个中国政府的一个中国政府的一个B3 BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ我2.这两个单词的意思是：一个单词的意思意思是：一个单词的意思意思是：一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词的意思是，一个单词是，一个单词，一个单词，一个单词，一个单词，一个单词的意思是，一个单词的意思是，一个单词，一个单词，一个单词的是，一个单词，一个单词，或者或者一个单词，或者一个单词的Fnevtly6+6+8+8+8+6+8+6+8+6+8+8+8+6+8+6+8+6+6+6+6+6+5+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6+6非非非军事军事军事力量力量对1 1 1 JPCSDWK3IEAXJQBLLCOXNDVEOAZ6SFJNk5TTzytCNZk/POTTSV40NWOWFZW86WNJRPXSN60NJFLHEQYRBSLQZM2JNEZ3QCSKGM0KTLI3ZZVS7Y/iivZTweYXJ26Y+RTBV1ZH3HYKGYFGSTKfrVBRQWWWr8Wr2Wr2Wr2Wr2Wr1QQSMH1S95S7G+EEW0F3JYKYKTBV6Wr8YKr8YKn0Fv9FvasZVcYWr1Wr1Wr1Wr1Wr1Wr1Wr1Wr2Wr2Wr2Wr2Wr2Wg8Wr2Wr2Wg8Wg8Wr2Wr2Wr2Wr2Wr2Wr2Wr2Wr2Wr2Wr2W；
类应用程序扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
已选择选项卡：“员工”
};
绑定（this）（“搜索新闻”，“员工新闻”）；
}
_雇员新闻社（）{
这是我的国家({
已选择选项卡：“员工”
})
}
_searchOnPress（）{
这是我的国家({
已选择选项卡：“搜索”
})
}
render（）{
返回(
)
}
}

尝试分段控制

我更改了渲染中的片段，并返回到这个

<SegmentedControlIOS
    values={['Employees', 'Search']}
    selectedIndex={0}
    tintColor={'#D6573D'}
    onValueChange={(val) => {
    if (val === "Employees"){
        this._employeesOnPress;
    }
    else if (val === "Search") {
        this._searchOnPress;
    }}}
    onChange={(val) => {
    if (val === "Employees"){
        <EmployeesTab />
    }
    else if (val === "Search") {
        <SearchTab />
    }}}
/>

{
如果（val==“员工”）{
这是我的雇员新闻社；
}
else if（val==“搜索”）{
这本书；
}}}
onChange={（val）=>{
如果（val==“员工”）{
}
else if（val==“搜索”）{
}}}
/>

这给了我

---

我不理解这个问题。任何帮助都将不胜感激！谢谢

您不能在道具内部渲染

JSX

，相反，您可以根据

值

在状态下渲染组件。例如：

<SegmentedControlIOS
    values={['Employees', 'Search']}
    selectedIndex={0}
    tintColor={'#D6573D'}
    onValueChange={(val) => this.setState({ selectedTab: val})}
/>
{this.state.selectedTab === 'Employees' ? <EmployeesTab /> : <SearchTab /> }

this.setState（{selectedTab:val}）
/>
{this.state.selectedTab==='Employees'？：}