我不能用父视图包装子(图像，文本输入).我该如何解决这个问题?

Question

我正在制作一个与map相关的应用程序，并使用react-native-maps包。因此，我尝试将子组件(如图像，图像背景，文本输入(包装在视图组件中，但是渲染的结果有时是对的，有时是错误的。 子组件的呈现并不总是正确的。有时，子组件未设置自己的位置。

反应原生

<View style={styles.searchBar}>
<ImageBackground
source={require('./assets/search.png')}
style={styles.searchImage}></ImageBackground>
<TextInput
placeholder="food, store, ingredient"
style={styles.searchText}></TextInput>
</View>

const styles = StyleSheet.create({ searchBar: {
flex: 1,
backgroundColor: "white",
flexDirection: 'row',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'flex-start',
paddingHorizontal: 5,
marginHorizontal: 10,
borderRadius: 8, 
shadowColor: "#000", 
shadowRadius: 2,
shadowOpacity: 0.2, 
shadowOffset: { x: 0.5, y: -0.5 }, }, searchImage: {
flex: 1,
width: 32, 
height: 32, 
marginLeft: 5, }, searchText: {
flex: 9,
fontSize: 17,
marginHorizontal: 1, },  });

Answer 1

子项不需要弹性值。您已经在使用"roll"值进行排列，并且已将图像大小设置得很小。

const styles = StyleSheet.create({
searchBar: {
flex: 1,
backgroundColor: "white",
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
borderRadius: 8, 
shadowColor: "#000", 
shadowRadius: 2,
shadowOpacity: 0.2, 
shadowOffset: { x: 0.5, y: -0.5 }, 
}, 
searchImage: {
width: 32, 
height: 32, 
marginLeft: 5, },
searchText: {
fontSize: 17,
marginHorizontal: 1, },  });