react-native - React Native中TextInput中的按钮

Question

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


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

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

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>

您可以根据图像调整尺寸，然后导入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;

祝你好运!