1

在 react native 文档中，我找不到更改底部单词的方法？

    <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？

4

2 回答 2

3

TabBarItem 允许您使用来自UITabBarSystemItem的 iOS 预设图标之一，并且在您的示例代码中它使用“更多”图标。但至关重要的是，UITabBarSystemItem 的文档指出：

系统标签栏项目的标题和图片不能更改。

title如果您将图标设置为 data-uri 或本地图像，而不是来自 UITabBarSystemItem 的图标，您将能够使用道具将项目上的文本覆盖为您想要的任何内容。

于 2015-04-04T10:34:52.417 回答
0

您可以使用自定义图标为您的 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);
于 2016-09-22T08:52:32.163 回答