[解決済み] 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ですべてのプロパティが利用できるわけではありません。だから、どんな助けでもありがたい、ありがとう :)

どのように解決するのですか？

OK、私の問題は解決しました。もし誰か通りすがりの人がいたら、ここに答えがあります。

を追加するだけです。 left: 0, と top: 0, をスタイルに追加して、はい、疲れました。

position: 'absolute',
left:     0,
top:      0,