react-native - 如何使用 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>

我尝试切换到纯 TextInput 而不是 sayemUI 文本输入，并添加了这种样式，但是如何让宽度自动拉伸？如何修复按钮上的填充？

编码

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