화면 하단에 모든 너비를 차지하는 흰색 막대를 배치하고 싶습니다. 이를 위해 absolute
상속 된 flexbox
매개 변수 와 함께 위치 지정을 사용하는 것에 대해 생각했습니다 .
다음 코드를 사용하여 다음과 같이 렌더링 합니다 .
내 코드는 다음과 같습니다.
var NavigationBar = React.createClass({
render: function() {
return(
<View style={navigationBarStyles.navigationBar}>
//Icon 1, Icon 2...
</View>
);
}
});
var Main = React.createClass({
render: function() {
return(
<View style={mainStyles.container}>
<NavigationBar />
</View>
);
}
});
var mainStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#456783',
}
});
var navigationBarStyles = StyleSheet.create({
navigationBar: {
backgroundColor: '#FFFFFF',
height: 30,
position: 'absolute',
flexDirection: 'row',
bottom: 0,
justifyContent: 'space-between'
},
});
CSS 스타일링을 처음 접했고 React-Native에서 모든 속성을 사용할 수있는 것은 아닙니다. 그래서 어떤 도움을 주시면 감사하겠습니다 🙂
답변
좋아, 여기를 지나가는 사람이 있다면 내 문제를 해결했습니다.
스타일과 스타일 을 추가해야 left: 0,
했고 top: 0,
, 예, 피곤합니다.
position: 'absolute',
left: 0,
top: 0,
답변
첫 번째 단계는
position: 'absolute',
그런 다음 요소 전체 너비를 원하면
left: 0,
right: 0,
그런 다음 요소를 맨 아래에 놓으려면
bottom: 0,
// don't need set top: 0
당신은 상단에있는 요소를 배치 할 경우, 교체 bottom: 0
로top: 0
답변
이 솔루션은 저에게 효과적이었습니다.
tabBarOptions: {
showIcon: true,
showLabel: false,
style: {
backgroundColor: '#000',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
position: 'relative',
zIndex: 2,
marginTop: -48
}
}