問題タブ [react-native-flexbox]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
6 に答える
12222 参照

javascript - すべてのスペースを占有する ScrollView minHeight

ScrollView必ずしもそのサイズを超えるとは限らないコンテンツがあります。エラーが発生すると、エラーメッセージを追加するために展開され、サイズを超えるフォームであるとしましょうScrollView。そのため、そのスクロールを使用しています。

問題は、コンテンツを常に少なくとも ScrollView と同じサイズにしたいということです。私はminHeightプロパティを認識していますが、それを使用する唯一の方法は再レンダリングであり、これは避けたいと考えています。

私は状態管理にreduxを使用していますが、これが私が持っているものです

this.props.setScrollContentHeightその状態で高さに入るアクションをトリガーするところ、高さthis.props.scrollHeightと言います。そのため、onLayout 関数がトリガーされた最初のレンダリングの後、状態が ScrollView で更新され、そのコンテンツheightとして割り当てられます。minHeight

コンテンツのスタイルを に設定するとflex: 1、ScrollView はスクロールしません。

パフォーマンスのために、その 2 番目のレンダリングを回避する方法を考えられますか?

ありがとうございました!

0 投票する
1 に答える
1535 参照

react-native - React Native の Flexbox 'flex' プロパティ

私は素晴らしいReactNativeKatasを使って、React Native でのフレックスボックス レイアウトを学んでいます。次の例でflexは、親の 2 つの子ビューView( を使用するビュー) のプロパティstyles.containerが に設定されてい0.1ます。両方を設定すると、 0.11View番目がディスプレイの絶対左に、2 番目Viewが中央に配置されます。両方のプロパティに設定0.1すると、なぜこのように整列するのですか?flexView

シミュレータでレンダリング:

フレックス サイジングの例

0 投票する
1 に答える
1141 参照

android - React Native: Android ではオーバーフロー = hidden として、フローティング アクション ボタンをどのように設計できますか?

ドキュメントに記載されているように、Android ではオーバーフローは非表示に設定されており、変更できません。したがって、これはこの種の問題を引き起こします。私の質問は、反応ネイティブでフローティング アクション ボタンを作成するにはどうすればよいかということです。Google マップのこの旅程ボタンのようなボタンが欲しいです。エンパイア ステート ビルディング ビューをドラッグするとエンパイア ステート ビルディング ビューと同期して移動するため、何らかの方法でエンパイア ステート ビルディング ビューにリンクする必要があります。

私はそれを機能させるさまざまな方法を見てきましたが、目に見えないビューを作成したり、多くの小道具を伝播する必要があるため、どれも気分が良くありません. 人々が慣れている一般的なトリックはありますか?

スクリーンショット

0 投票する
1 に答える
776 参照

reactjs - 画像内の Flexbox 配置テキスト

React Native を使用して、特定のレイアウトを作成しようとしています。

私は、垂直方向と水平方向の中央に配置された(ビュー内の)画像と、画像の上に垂直方向と水平方向の中央に配置されたいくつかのテキストを持っています。テキストは画像/背景画像の上に来る必要があるため、画像タグ内に配置します。

現在、そのテキストのコンテンツは非常に長くなる可能性があり、画像タグ内にあるため、折り返されます。

テキスト内のコンテンツが折り返されず、画像の上に表示されるようにするにはどうすればよいですか?

これまでの私のレイアウト:

ここに画像の説明を入力

私が達成しようとしているレイアウト

ここに画像の説明を入力

私のコード:

ありがとう

0 投票する
1 に答える
1782 参照

react-native - ビューの周りの境界線は、反応ネイティブのビューの色の端の周りにいくつかの領域を残します

質問のタイトルを作成する際に最善の仕事をしなかった可能性があります。以下は、rnplay で示されたエラーです。

https://rnplay.org/apps/eNIbjw

問題は、ユーザーのステータスを表すために、ユーザーのアバターに色付きのタイルを表示したいということです。Viewそのため、背景色がユーザーのステータス カラー (サンプル コードでは緑) に設定されているアバター イメージを配置しView、見栄えを良くするために の周りに白い境界線を設定しました。よく観察すると、(Cmd + +) を数回押して画面をズームすると、iOS の境界線の周りに非常に細い緑色の線が表示されます。以下は、iOS での表示のスクリーンショットです。

ここに画像の説明を入力

この問題は Android には存在せず、境界線の周りに細い緑色の線がなく、完全に問題なく表示されます。

この問題を回避するためにいくつかの異なるスタイルを試してみましたが、CSS の知識が限られているため、そうすることができませんでした。

回避方法があれば共有してください。

ありがとう!