Question

我正在学习对本机立即做出反应，并对它的工作方式产生新的反应。我目前正在做一个项目，试图对它进行一些修改。 https://github.com/denodenodeno/employee

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

带有标签栏的原始代码

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>
        )
    }
}

Tab Bar

尝试分段控制

我更改了渲染器中的片段并返回到此

<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 />
    }}}
/>

这给了我this segmented control with nothing else rendered

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

Answer 1

您不能在道具内部渲染JSX，而是可以在状态下基于value渲染组件。如：

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

如何在React Native中将标签栏更改为分段控件？

1 个答案: