Question

如何在文本输入中插入和设置按钮样式，如下所示：

我可以使用这样的代码吗？

Answer 1

抱歉延迟，但这样的事情应该有效：

<View style={{flexDirection:'row', width: window.width, margin: 10, padding:4, alignItems:'center', justifyContent:'center', borderWidth:4, borderColor:'#888, borderRadius:10, backgroundColor:'#fff'}}>
  <View style={{flex:4}}>
    <TextInput
        onChangeText = {(textEntry) => {this.setState({searchText: textEntry})}}
        style={{backgroundColor:'transparent'}}
        onSubmitEditing = {()=>{this.onSubmit(this.state.searchText)}}
      />
  </View>
  <View style={{flex:1}}>
    <Button onPress={ () => this.onSubmit(this.state.searchText) }>
        <Image source={ require('../images/searchImage.png') } style={ { width: 50, height: 50 } } />
    </Button>
  </View>
</View>

根据您的图片调整大小，按钮导入如下：

import Button from '../components/Button';

我喜欢将按钮保留在外部文件夹中，如下所示：

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';

class Button extends Component {
  handlePress(e) {
    if (this.props.onPress) {
        this.props.onPress(e);
    }
  }
  render() {
    return (
        <TouchableOpacity
            onPress={ this.handlePress.bind(this) }
            style={ this.props.style } >
            <Text>{ this.props.children }</Text>
        </TouchableOpacity>
    );
  }
}
export default Button;

祝你好运！

Answer 2

将View与flexDirection:row包裹在一起可以让你在那里。

如果你想获得更高级的功能，可以查看react-native-textinput-effects包，它会为你提供一些非常漂亮的输入。

Answer 3

<View style={{flexDirection:'row'}}>
    <View>
      <TextInput
          style={{alignItems:'center',justifyContent:'center',backgroundColor:'white'}}
          value = {this.state.searchString}
          onChangeText = {(searchString) => {this.setState({searchString})}}
          placeholder = 'Search'
          keyboardType = 'web-search'
          onSubmitEditing = {()=>{this._fetchResults()}}
          ref = 'searchBar'
          />
    </View>
    <TouchableHighlight style={{alignItems:'center',justifyContent:'center'}} onPress = {()=>{this._fetchResults()}} underlayColor = 'transparent'>
        <View>
          <Icon name="search" size = {20} color = "#4285F4" />
        </View>
    </TouchableHighlight>
</View>

如果你没有使用react-native-vector-icons用.png放大镜图像替换图标

TextInput中的按钮反应原生

3 个答案: