2017-03-18 102 views
0

我試圖在Icon.ToolbarAndroid組件內創建一個搜索框。但是我無法改變文本框的寬度,直到消息圖標占據所有區域。有人可以幫我嗎?增加文本框內的寬度Icon.ToolbarAndroid

enter image description here

以下是我使用的代碼。 (我也試過把minWidth也。)

  <Icon.ToolbarAndroid 
      actions={[ 
       { title: 'Chat', iconName: 'chat', iconSize: 24, show: 'always' }, 
       { title: 'Alert', iconName: 'notifications', iconSize: 24, show: 'always' } 
      ]} 
      navIconName="menu" 
      title="" 
      style={styles.toolbar} 
      onActionSelected={this.onActionSelected} 
      onIconClicked={this.onIconClicked.bind(this)} 
     > 
      <TextInput style={styles.searchBox} minWidth={40}>Testing</TextInput> 
     </Icon.ToolbarAndroid> 

這是我使用的樣式。

const styles = StyleSheet.create({ 
    toolbar: { 
     backgroundColor: '#2D4571', 
     height: 48, 
    }, 
    searchBox: { 
     backgroundColor: '#4D648D', 
     color: '#eeeeee', 
     width: 40 
    } 
}); 

回答

0

我能夠通過在視圖中包裝文本輸入來實現結果。但只有在給出backgroundColor的情況下才有效。如果我刪除它的顏色,它回到上面的圖片。

  <View style={{ flex: 1, backgroundColor: '#ffaabb', flexDirection: 'row' }}> 
       <TextInput style={styles.searchBox} >Testing </TextInput> 
      </View>