React Native中TextInput中的按钮

Question

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

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

<Textinput>
   <Button></Button>
</Textinput>

Answer 1

将两者都包裹在ViewwithflexDirection:row应该会让你到达那里。

如果你想要更高级，你可以查看react-native-textinput-effects包，它会给你一些非常漂亮的输入。

Answer 2

很抱歉造成延迟，但类似的方法应该可以解决：

<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>

您可以根据图像调整尺寸，然后导入Button，如下所示：

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;

祝好运！