パスborderRadiusが反応し、ネイティブにする

Question

どのように私はreact-nativeに

border-radius: 50% 50% 4px 50% 

のようなプレーンなCSSから取られborderRadiusを渡すでしょうか？

、私は

borderRadius: "50% 50% 4px 50%" 

を試してみましたが、それは私の動的な型の二重期待

を与えたが、文字列型

Answer 1

はborderBottomLeftRadius、borderBottomRightRadius、borderTopLeftRadiusで個別に各コーナーを設定してみてくださいましたおよびborderTopRightRadius。

また、reactを使用する場合、値は数値のみを受け入れます。

Answer 2

あなたは中

すべての寸法は、ネイティブリアクト無単位であるため、パーセンタイル値を渡すと、密度非依存のピクセルを表すことはできません。

これは、あなたがが使用率と、画素できないことを意味します。

同様に、borderRadiusはダブルではなく、文字列と異なるコーナーに異なる値を適用することを必要とし、あなたはヘルパー関数

const getBorderRadius = (borderTopLeftRadius = 0, borderTopRightRadius = 0, borderBottomLeftRadius = 0, borderBottomRightRadius = 0) => { 
    return { 
    borderTopLeftRadius, 
    borderTopRightRadius, 
    borderBottomLeftRadius, 
    borderBottomRightRadius 
    } 
} 

あなたを書くことができ、

borderBottomLeftRadius 
borderBottomRightRadius 
borderTopLeftRadius 
borderTopRightRadius 

を使用する必要がありますかあなたのスタイルでそれをそのまま使うことができます。

<View styles={Object.assign({ <insert your styles here> }, getBorderRadius(10, 10, 10, 10)} /> 

I Fプロジェクトが、あなたは単にあなたが50％を使用したい場合、あなたはそれを自分で計算する必要が

<View styles={{ <insert your styles here>, ...getBorderRadius(10, 10, 10, 10)}}/> 

を書くことができます（transform-object-rest-spreadが必要になる場合があります）オブジェクトの広がりの支援しています。コンポーネントの高さと幅を知っていれば、それは簡単です。

Answer 3

react-nativeは、camelCaseのすべてのスタイルまたは小道具を実装します。 borderRadiusを提供するには、borderRadiusスタイルの小道具を使用する必要があります。境界線の 他のスタイルの小道具は、borderTopLeftRadiusあるorderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadiusB。これらは、ネイティブ反応する何の意味もありませんので、彼はまた、「PX」と「％」を削除する必要があります50,50

render(){ 
    return(
    <View style={{height:50, width:50, borderRadius:25, backgroundColor:'#555555'}}/> 
    ) 
}