2015-04-04 7 views
1

в ответном нативном документе Я не могу найти способ изменить нижние слова?Как я могу изменить слово в TabBarIOS в ответном нативном?

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

ответ

3

TabBarItem позволяет использовать один из предустановленных значков iOS от UITabBarSystemItem, а в вашем примере кода используется значок «Больше». Тем не менее, в документации для UITabBarSystemItem указано:

Невозможно изменить заголовок и изображение элементов панели инструментов системы.

Если установить иконку либо данные УИДР или локальное изображение, а не значок из UITabBarSystemItem, вы будете иметь возможность переопределить текст по этому пункту, что вы хотите, используя title опоры.

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); 
Смежные вопросы