リニアグラジエントのリアクトネイティブ

Question

コンポーネントがあり、右下から左上のリニアグラデーションをネイティブにしたい、「リアクションネイティブリニアグラデーション」から試しましたが、動作しません。

コンポーネント：

//戻りレンダリング

return( 
     <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} > 
     <View style={styles.container}> 
     <View style={styles.topPart}> 
      <Header ></Header> 
      <Content ></Content> 
     </View> 
     <Footer style={styles.footer}></Footer> 
     </View> 
    </LinearGradient> 
); 

、おかげでこれを達成する方法を案内してください？

Answer 1

、

npm install --save react-native-linear-gradient 

しようとすると、最後の、しかし最も重要なことはいくつかを設定しましたあなたのLinearGradient、

<LinearGradient 
    colors={['#6e45e2', '#88d3ce']} 
    style = { styles.container }> 

      <View> 
       //your elements here 
      </View> 
</LinearGradient> 

あなたてLinearGradient styleから値私はちょうどそれを追加flex値のため、あなたの勾配が表示されていないと確信しています注

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
    } 
}); 

、と。間違いなく動作します。

Answer 2

開始位置と終了位置を小道具として設定すると、傾斜のある傾斜を実現できます。あなたのケースでは、これらのは次のようになります。

start={{ x: 0, y: 0 }} 
end={{ x: 1, y: 1 }} 

あなたがまったくの勾配が表示されないことを意味している場合は、インストールの指示に従ってライブラリをリンクしましたか？

react-native link 

、として、プロジェクトのすべての依存関係をリンクとあなたはLinearGradient

、など

import LinearGradient from 'react-native-linear-gradient`; 

をインポートしていることを確認することにより、react-native-linear-gradientライブラリをインストールした後