React native 如何设置视图的样式以将内容包装在其中

让我先说一句，我是新来的

以下是我的组件：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Text, View, Image, TextInput } from 'react-native';

class CountryCodeInput extends Component {
  state = { text: '' }
  constructor(props) {
    super(props)
  }

  componentDidMount() {
  }

  onTextChange(text) {
    if (/^\d+$/.test(text) || text === "") {
     this.setState({ text })
    }
    // this.props.onTextChange(text)
  }

  render() {
    return (
      <View style={{flex: 1, flexDirection: "row", marginRight: 0, backgroundColor: 'red', alignSelf:'baseline', flexWrap: "wrap"}}>
      <Text style={{backgroundColor:"yellow"}}>+</Text>
        <TextInput 
        onChangeText={(text)=>this.onTextChange(text)} 
        maxLength={3} 
        keyboardType="numeric"
        style={{backgroundColor:"grey", borderBottomColor: 'black', borderBottomWidth: 1, fontSize: 16, height: 24, width: 36, paddingVertical: 4 }}
        value={this.state.text} />
      </View>
    );
  }
}


export default CountryCodeInput

/**
*示例React本机应用程序
* https://github.com/facebook/react-native
*
*@格式
*@flow
*/
从“React”导入React，{Component}；
从“react native”导入{Text，View，Image，TextInput}；
类CountryCodeInput扩展组件{
状态={text:'}
建造师（道具）{
超级（道具）
}
componentDidMount（）{
}
onTextChange（文本）{
如果（/^\d+$/.test（text）| | text==“”）{
this.setState（{text}）
}
//this.props.onTextChange（text）
}
render（）{
返回(
+
this.onTextChange（text）}
maxLength={3}
keyboardType=“数字”
样式={{backgroundColor:“灰色”，borderBottomColor:“黑色”，borderBottomWidth:1，fontSize:16，height:24，width:36，paddingVertical:4}}
值={this.state.text}/>
);
}
}
导出默认CountryCodeInput

下面是它的外观：

我需要删除所有红色部分，并将黄色部分的高度限制为灰色部分的高度。我该怎么做

---

alignSelf:'baseline'

和

flexWrap:“wrap”

似乎没有多大帮助。

从你的风格中删除flex

<View style={{ flexDirection: "row", marginRight: 0, backgroundColor: 'red', alignSelf:'baseline', flexWrap: "wrap"}}>

好的，谢谢。请您解释一下什么时候应该使用

flex:1

，然后？

flex:1

意味着占用所有可用空间，如果您有两个视图使用

flex:1

，它们将占用50%的可用空间。