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>我發(fā)起的</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
實(shí)際效果
actual
解決：
刪除 style={{width:WIDTH,height:HEIGHT}}
或者設(shè)置style={{flex:1}} 党巾。
記住ScrollView必須有一個確定的高度才能正常工作以现，因?yàn)樗鼘?shí)際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個確定高度的容器（通過滾動操作）球订。要給一個ScrollView確定一個高度的話佃蚜，要么直接給它設(shè)置高度（不建議）乞封，要么確定所有的父容器都已經(jīng)綁定了高度兢卵。在視圖棧的任意一個位置忘記使用{flex:1}都會導(dǎo)致錯誤鳖孤，你可以使用元素查看器來查找問題的原因者娱。
所以scrollview的屬性不光和自己有關(guān)還和父組件棧的屬性有關(guān)。
GitHub：https://github.com/facebook/react-native/issues/15581
