如何在 React Native 中的 FormInput 右侧放置一个按钮？

Question

我正在使用 TextInput 但无法设置其宽度谁能帮我设计一个右侧有按钮的 FormInput。如果它连在一起就好了

我正在使用

<View style={{ flexDirection: "row"}}>
                <Ionicons.Button name="md-arrow-round-back" backgroundColor="#FFF" color="#00AEEB" size={25} onPress={()=>this.props.navigation.navigate('ScreenOne')}/>
                <FormInput autoFocus={true} placeholder="Comment" onChangeText={(comment) => this.setState({comment})} />
                <Ionicons.Button name="md-checkmark" backgroundColor="#0f0" color="#fff" size={25} onPress={()=>this.props.navigation.navigate('ScreenOne')}/>

            </View>

Answer 1

TextInput 有一个 style prop，您可以在其中放置 width 作为字段。

<TextInput style={{width: 150, height: 30}} placeholder="Enter stuff here" />

要在右侧放置一个按钮，您可以将 TextInput 放置在 View 组件中，同时为其指定以下样式属性：{display: flex, flexDirection: row}:

<View style={{display: flex, flexDirection: 'row'}}>
  <TextInput style={{width: 150, height: 30}} placeholder="Enter stuff here" />
  <Button onPress={this.yourFunction} title="Submit" />
</View>

为了不对宽度进行硬编码，您可以像这样使用 Dimensions 模块：

import {TextInput, Button, Dimensions} from 'react-native'
const {width} = Dimensions.get('window')

// inside your component
render() {
  return (
    <View style={{display: flex, flexDirection: 'row', width}}>
      <TextInput style={{flex: 0.75, height: 30}} placeholder="Enter stuff here" />
      <Button style={{flex: 0.25}} onPress={this.yourFunction} title="Submit" />
    </View>
  )
}

这将为文本字段提供 75% 的宽度，为按钮提供 25% 的宽度。

Answer 2

嗨@Vivekanand Panda 如果你不想被硬编码，你可以使用

import { Dimensions } from 'react-native';

var { height, width } = Dimensions.get('window');

它将占用设备的尺寸

 <View style={{display: flex, flexDirection: 'row'}}>
     <TextInput style={{width: width-20, height: height}} placeholder="Enter stuff here" />

     ***hear width: width-20  and height: height gives the height and width of the device***

     <Button onPress={this.yourFunction} title="Submit" />
 </View>

Answer 3

<View style={{ flexDirection: "row"}}>
  <View style={{ width: "10%", height: 40}}>
    <Ionicons.Button name="md-arrow-round-back" style={{ width: "100%"}} backgroundColor="#FFF" color="#00AEEB" onPress={()=>this.props.navigation.navigate('ScreenOne')}/>
  </View>
  <View style={{ width: "80%", height: 40}}>
    <FormInput autoFocus={true}  placeholder="Comment" onChangeText={(comment) => this.setState({comment})}  />
  </View>
  <View style={{ width: "10%", height: 40, backgroundColor:"#fff", borderRadius: 50}}>
    <Ionicons.Button name="md-checkmark" style={{ width: "100%", borderRadius: 50}} backgroundColor="#548e59" color="#fff"/>
  </View>
</View>

如何在 React Native 中的 FormInput 右侧放置一个按钮？

How can I put an button on right side to FormInput in React Native?

textinput

react-native