TextInput 与 flex布局问题



  • <View style={ {flex:1,flexDirection:'row'}}>
    <TextInput />
    </View>
    如上布局,View使用了flex布局方式, TextInput 消失不见了。
    如果把 flexDirection属性去掉就可以了。
    这跟浏览器中的flex布局完全不一样的效果啊。
    请问是为什么TextInput不见了



  • 原因是:View默认flexDirection:'column',此时子节点从上到下排列,TextInput默认宽度与父节点相同,默认高度为一行的高度,因此可以显示。

    当flexDirection:'row'时,节点从左到右排列,TextInput默认宽度为0,默认高度为与父节点高度相同,此时无法显示。

    所以你需要在TextInput上也带上style={{flex:1}},使得从左到右排列的时候,它的宽度也填满父节点。



  • 谢谢回答,解决了我的疑问。
    请问有没有资料介绍这些组件的默认样式呢?


登录后回复