web-dev-qa-db-ja.com

Flexbox Nativeの絶対およびReact

画面の下部に幅いっぱいの白いバーを配置したいと思います。そのために、継承されたabsoluteパラメーターでflexboxポジショニングを使用することを考えました。

次のコードでは、 this のようなものをレンダリングします。

ここに私のコードがあります：

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で利用できるわけではありません。だから、どんな助けも感謝します、ありがとう:)

javascriptcssreact-native
69
ilansas

OK、私の問題を解決しました、誰かがここを通り過ぎている場合は答えです：

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

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

最初のステップは追加することです

position: 'absolute',

エレメントを全幅にしたい場合は、追加します

left: 0,
right: 0,

次に、要素を下部に配置する場合は、追加します

bottom: 0,
// don't need set top: 0

要素を最上部に配置する場合は、bottom: 0をtop: 0に置き換えます

47
Spark.Bao

このソリューションは私のために働いた：

tabBarOptions: {
      showIcon: true,
      showLabel: false,
      style: {
        backgroundColor: '#000',
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        position: 'relative',
        zIndex: 2,
        marginTop: -48
      }
  }
2
Alex