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的右侧放置一个按钮？

3 个答案: