如何使用 Shoutem/UI 为 React Native 设置带有连续按钮的 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>

我尝试切换到普通 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',
  },

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

如何使用 Shoutem/UI 为 React Native 设置带有连续按钮的 TextInput 样式

How do I style a TextInput with a button in a row using Shoutem/UI for react native

react-native

shoutem