2017-03-18 75 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>