Environment
-
react-native -v:0.46.4 -
node -v:v8.3.0 -
npm -v:5.3.0 -
yarn --version:0.27.5
- Target Platform: android && ios
- Development Operating System: mac10.12.5
- Build tools:webstorm
Steps to Reproduce
code like that:
renderTab = ()=> {
return (
<View style={{width:WIDTH,height:SCALE(100),backgroundColor:'blue',flexDirection:'row', justifyContent:'space-around', alignItems:'center'}}>
<View><Text>我发起的</Text></View>
{(this.state.data&&this.state.data.myIsLeader===1)?<View><Text>带我审批</Text></View>:null}
{(this.state.data&&this.state.data.myIsLeader===1)?<View><Text>我已审批</Text></View>:null}
</View>)
};
render(){
return (
<View style={{width:WIDTH,height:HEIGHT}}>
<ScrollView
style={{backgroundColor:'red',width:WIDTH,height:HEIGHT-SCALE(200)}}>
</ScrollView>
{this.renderTab()}
</View>
);
}
期望效果
like that:
expected
实际效果
actual
解决：
删除 style={{width:WIDTH,height:HEIGHT}}
或者设置style={{flex:1}} 。
记住ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{flex:1}都会导致错误，你可以使用元素查看器来查找问题的原因。
所以scrollview的属性不光和自己有关还和父组件栈的属性有关。
GitHub：https://github.com/facebook/react-native/issues/15581
