react-native – TextInput中的按钮作为本机响应

发布时间：2020-12-15 20:15:05 所属栏目：百科来源：网络整理

导读：如何在文本输入中插入和设置按钮样式,如下所示：我可以使用这样的代码吗？ Textinput Button/Button/Textinput 解决方法抱歉延迟,但这样的事情应该有效： View style={{flexDirection:'row',width: window.width,margin: 10,padding:4,alignItems:'center'

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

enter image description here

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

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

解决方法

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

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

祝好运！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!