我如何使用Shoutem/UI連接一個按鈕來設置TextInput的反應本機

我試圖基本上創建一個搜索輸入字段，旁邊有一個取消按鈕，但TextInput不顯示和格式化被打破。我如何使用Shoutem/UI連接一個按鈕來設置TextInput的反應本機

我用們ShoutEm UI工具包https://shoutem.github.io/docs/ui-toolkit/components/text-input

如何設置的樣式，以使輸入框中顯示正確？我看不到輸入框，並且按鈕邊距看起來不對。

screen shot 2017-01-25 at 8 50 26 am

我應該使用一排，而不是一個視圖？然而，使用行似乎也不能很好地工作。

有沒有人有一個使用shoutem UI輸入旁邊的按鈕形式的例子？

<View styleName="horizontal space-between wrap"> 
    <TextInput 
     placeholder="Search" 
     autoFocus={ true } 
     returnKeyType="search" 
     clearButtonMode="while-editing" 
    /> 
    <Button styleName="right-icon" onPress={() => { 
     this.setModalVisible(!this.state.modalVisible) 
     }}> 
     <Text>Cancel</Text> 
    </Button> 
    </View>

我試圖切換到普通的TextInput而非shoutemUI文字輸入和我說這種風格，但我如何才能寬度自動伸展？如何修復按鈕上的填充？

代碼

<View styleName="horizontal" style={ StyleSheet.flatten(styles.searchRow)}> 
     <TextInput 
      placeholder="Search" 
      autoFocus={ true } 
      returnKeyType="search" 
      clearButtonMode="while-editing" 
      style={ StyleSheet.flatten(styles.searchBox) } 
     /> 
     <Button styleName="right-icon" style={{padding: 5, margin:5}} onPress={() => { 
      this.setModalVisible(!this.state.modalVisible) 
      }}> 
      <Text>Cancel</Text> 
     </Button> 
     </View>

和風格

searchBox: { 
    borderWidth: 0.5, 
    padding: 5, 
    margin: 5, 
    paddingLeft:10, 
    width: 200, 
    alignSelf: 'stretch', 
    height:40, 
    backgroundColor: 'white', 
    borderColor: '#d3d3d3', 
    },

來源

2017-01-25 MonkeyBonkey

這是如何實現一個搜索圖標，清晰的圖標搜索字段：

<View styleName="container full-width md-gutter-left sm-gutter-right"> 
    <View style={style.container} styleName="horizontal sm-gutter-horizontal v-center"> 
     <Icon name="search" style={style.searchIcon} /> 
     <TextInput style={style.input} value={value} /> 
     { 
      value ? 
      <Button styleName="clear tight"> 
       <Icon 
       name="clear-text" 
       style={style.clearIcon} 
       /> 
      </Button> 
     } 
    </View> 
    <Button styleName="clear"> 
     <Subtitle>Cancel</Subtitle> 
    </Button> 
</View>

樣式名稱來自UI工具包的主題。以下是相關的樣式組件：

{ 
     clearIcon: { 
      color: '#2c2c2c', 
      opacity: 0.5, 
     }, 

     container: { 
      backgroundColor: '#f0f0f0', 
      borderRadius: 5, 
      flex: 1, 
      height: 30, 
     }, 

     searchIcon: { 
      color: '#888888', 
      fontSize: 16, 
     }, 

     input: { 
      backgroundColor: '#f0f0f0', 
      color: '#888888', 
      flex: 1, 
      fontSize: 15, 
      height: 30, 
      paddingVertical: 6, 
      placeholderTextColor: '#888888', 
      selectionColor: '#888888', 
     }, 
    },

你可能需要做一些修改，但這應該幫助你實現你需要的搜索領域。如果您不想或不能使用styleNames，只需查看它們定義的樣式。

來源

2017-04-04 09:25:55 airmiha

我如何使用Shoutem/UI連接一個按鈕來設置TextInput的反應本機

回答

相關問題