如何使用 Shoutem/UI 为 TextInput 设置带有按钮的连续样式以响应本机

Posted 2023-02-23

【中文标题】如何使用 Shoutem/UI 为 TextInput 设置带有按钮的连续样式以响应本机

【英文标题】：How do I style a TextInput with a button in a row using Shoutem/UI for react native

【发布时间】：2017-01-25 14:05:05

【问题描述】：

我正在尝试创建一个搜索输入字段，旁边有一个取消按钮，但 TextInput 不显示并且格式已损坏。

我正在使用shoutem ui 工具包https://shoutem.github.io/docs/ui-toolkit/components/text-input

如何设置样式以使输入框正确显示？我看不到输入框，按钮边距似乎关闭。

我应该使用行而不是视图吗？然而，使用一行似乎也不能很好地工作。

有没有人有一个表单的例子，在输入旁边带有按钮，使用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>

我尝试切换到纯文本输入而不是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',
  ,

【参考方案1】：

这是您可以使用搜索图标和清除图标实现搜索字段的方法：

<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，只需查看它们定义的样式即可。