Question

在本机文档中，我找不到改变底层词的方法吗？

    <TabBarItemIOS
      name="greenTab"
      icon={_ix_DEPRECATED('more')}
      accessibilityLabel="Green Tab"
      selected={this.state.selectedTab === 'greenTab'}
      onPress={() => {
        this.setState({
          selectedTab: 'greenTab',
          presses: this.state.presses + 1
        });
      }}>
      {this._renderContent('#21551C', 'Green Tab')}
    </TabBarItemIOS>

什么是accessibilityLabel？

Answer 1

TabBarItem允许您使用UITabBarSystemItem中的一个iOS预设图标，并在您的示例代码中使用＆＃34;更多＆＃34;图标。但至关重要的是，UITabBarSystemItem的文档指出：

无法更改系统标签栏项目的标题和图像。

如果您将图标设置为data-uri或本地图像，而不是UITabBarSystemItem中的图标，则您可以使用{{1}将项目上的文本覆盖为您想要的任何内容道具

Answer 2

您可以使用自定义图标

为TabBarIOS.Item尝试类似的操作

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, TabBarIOS } from 'react-native'

const base64Icon = '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 ReactNativePlayground extends Component {

    constructor(props) {
        super(props)

        this.state = {
            selectedTab: "more",
            tabBarItemTitle: "More"
        }
    }

    render() {
        return (
            <TabBarIOS>

                <TabBarIOS.Item selected={this.state.selectedTab === "more"}
                                title={this.state.tabBarItemTitle}
                                icon={{uri: base64Icon, scale: 3}}>
                    <View style={styles.container}>
                        <TouchableOpacity onPress={ (event) => { this._changeTabItemTitle() } }>
                            <Text style={styles.button}>Tap to Change Item Title</Text>
                        </TouchableOpacity>
                    </View>
                </TabBarIOS.Item>

            </TabBarIOS>
        );
    }

    _changeTabItemTitle() {
        this.setState({ tabBarItemTitle: "New More" })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    button: {
        fontSize: 20,
        color: "white",
        textAlign: 'center',
        backgroundColor: "#1155DD",
        borderRadius: 5,
        height: 30,
        margin: 30,
    },
});

AppRegistry.registerComponent('ReactNativePlayground', () => ReactNativePlayground);

如何在React Native中更改TabBarIOS中的文本？

2 个答案: