[javascript] React Native의 Absolute 및 Flexbox

Program / 글쓴이

화면 하단에 모든 너비를 차지하는 흰색 막대를 배치하고 싶습니다. 이를 위해 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
      }
  }

답변