flex with textinput 在我的反应本机应用程序中不起作用

Question

I want to extend the TextInput to the entire screen and not set a definite width.
To do that I know we have to set "flex:1"
But it doesn't seem to work at all. What is wrong here?? I want the TextInput to be stretched with the Button next to it.

 <View style={{flex: 1, alignItems: 'stretch' , flexDirection: 'row'}}>

        <TextInput value="nil" style={{ backgroundColor:"grey", height: 40}} textAlign='center'/>
        <Button title="V" onPress={()=>{this.dropList()}} />

        </View>

I want something like this. How do I get this???

Answer 1

You can use CSS Grid in your View , adding grid-template-columns for the columns width, like:

display: grid;
grid-template-columns: 1fr 3rem;
width: 100%;

With inline styles (not recommended at all):

{{ display: 'grid'; gridTemplateColumns: '1fr 3rem'; width: '100%' }}

Answer 2

You are putting the flex property on the parent whereas it needs to be applied on the TextInput itself.

Bonus : You don't need to set flexDirection to row because that's the default.

Here's a pure HTML, CSS example to show what I mean.

 .view { display: flex; }.view input { flex: 1; }

 <div class='view'> <input/> <button>Click Me</button> </div>