반응형
React Native의 Absolute 및 Flexbox
화면 하단에 모든 너비를 차지하는 흰색 막대를 배치하고 싶습니다. 이를 위해 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
This solution worked for me:
tabBarOptions: {
showIcon: true,
showLabel: false,
style: {
backgroundColor: '#000',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
position: 'relative',
zIndex: 2,
marginTop: -48
}
}
참고URL : https://stackoverflow.com/questions/29541971/absolute-and-flexbox-in-react-native
반응형
'programing' 카테고리의 다른 글
특히 Node.js가 Apache보다 더 확장 가능한 이유는 무엇입니까? (0) | 2020.10.24 |
---|---|
Entity Framework Fluent API를 사용하는 일대일 선택적 관계 (0) | 2020.10.24 |
Matlab 플롯에서 글꼴 크기 변경 (0) | 2020.10.23 |
전체 페이지를 이동시키는 ScrollIntoView () (0) | 2020.10.23 |
Windows 8에서 명령 프롬프트를 사용하여 DNS를 설정 / 변경하려면 어떻게해야합니까? (0) | 2020.10.23 |