React native 如何在右侧放置按钮以在React Native中输入？

我正在使用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>

this.props.navigation.navigate（'ScreenOne'）}/>
this.setState（{comment}}/>
this.props.navigation.navigate（'ScreenOne'）}/>

TextInput有一个，您可以将

width

作为字段放在其中

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

为了使宽度不被硬编码，您可以使用如下模块：

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

从'react native'导入{TextInput，按钮，维度}
const{width}=Dimensions.get（'window'）
//在组件内部
render（）{
返回(
)
}

---

这将使文本字段的宽度占75%，按钮的宽度占25%。

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

***hear width:width-20和height:height给出设备的高度和宽度***

this.props.navigation.navigate（'ScreenOne'）}/>
this.setState（{comment}}/>

向我们展示您迄今为止所做的尝试。宽度为硬线，这是不可接受的，它应支持不同的宽度device@VivekanandPanda我根据您的要求更新了答案，以显示另一种可能性。这意味着按钮不会像以前那样出现在右侧。谢谢你的支持，我解决了这个问题，也发布了答案，你使用的是textInput，这个问题是为我输入的。对不起，我弄错了。你在textInput里面的按钮是什么？没有边，我解决了这个问题。谢谢你的支持

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

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