如何使用Shoutem / UI为一行按钮设置TextInput的样式以进行反应原生

Question

我正在尝试基本上创建一个搜索输入字段，旁边有一个取消按钮，但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',
  },

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