add gradient

This commit is contained in:
Adrian Tiberius 2016-05-19 20:05:04 +03:00
parent 0556e299d6
commit 799808965d
8 changed files with 41 additions and 14 deletions

View File

@ -14,7 +14,8 @@
"react-native-vector-icons/Ionicons",
"react-native-circle-checkbox",
"react-native-randombytes",
"dismissKeyboard"
"dismissKeyboard",
"react-native-linear-gradient"
],
"imageDirs": [
"images"

View File

@ -128,6 +128,7 @@ dependencies {
compile "com.facebook.react:react-native:+" // From node_modules
compile project(':react-native-contacts')
compile project(':react-native-i18n')
compile project(':react-native-linear-gradient')
// compile(name:'geth', ext:'aar')
compile(group: 'status-im', name: 'android-geth', version: '1.4.0-201604110816-a97a114', ext: 'aar')

View File

@ -10,6 +10,7 @@ import android.os.Bundle;
import android.os.Environment;
import com.github.ethereum.go_ethereum.cmd.Geth;
import com.bitgo.randombytes.RandomBytesPackage;
import com.BV.LinearGradient.LinearGradientPackage;
import java.util.Arrays;
import java.util.List;
@ -78,7 +79,8 @@ public class MainActivity extends ReactActivity {
new VectorIconsPackage(),
new ReactNativeContacts(),
new ReactNativeI18n(),
new RandomBytesPackage()
new RandomBytesPackage(),
new LinearGradientPackage()
);
}
}

View File

@ -14,3 +14,5 @@ include ':realm'
project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
include ':randombytes'
project(':randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/app')
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')

View File

@ -14,6 +14,7 @@
"react-native-contacts": "^0.2.4",
"react-native-i18n": "0.0.8",
"react-native-invertible-scroll-view": "^1.0.0",
"react-native-linear-gradient": "^1.5.7",
"react-native-loading-spinner-overlay": "0.0.8",
"react-native-randombytes": "^2.0.0",
"react-native-vector-icons": "^1.3.4",

View File

@ -36,6 +36,15 @@
[image {:source {:uri (keyword (str "icon_" (name n)))}
:style style}])
;(def react-linear-gradient (.-default (js/require "react-native-linear-gradient")))
;(def linear-gradient (r/adapt-react-class react-linear-gradient))
(set! js/window.LinearGradient (js/require "react-native-linear-gradient"))
(defn linear-gradient [props]
(js/React.createElement js/LinearGradient
(clj->js (merge {:inverted true} props))))
(def platform (.. js/React -Platform -OS))
(def android? (= platform "android"))

View File

@ -13,18 +13,24 @@
(def tab-height 56)
(def tabs
{:flexDirection :row
{:flex 1
:position :absolute
:bottom 0
:right 0
:left 0
})
(def top-gradient
{:flexDirection :row
:height 3})
(def tabs-container
{:flexDirection :row
:height tab-height
:opacity 1
:backgroundColor :white
:justifyContent :center
:alignItems :center
:borderTopColor "#1c18354c"
:borderTopWidth 1})
:alignItems :center})
(def tab
{:flex 1
@ -47,3 +53,4 @@
:height tab-height
:justifyContent :center
:alignItems :center})

View File

@ -5,7 +5,8 @@
text-input
text
image
touchable-highlight]]
touchable-highlight
linear-gradient]]
[reagent.core :as r]
[syng-im.components.tabs.styles :as st]
[syng-im.components.tabs.tab :refer [tab]]))
@ -19,4 +20,7 @@
(defview tabs [{:keys [style tab-list selected-index]}]
(let [style (merge st/tabs style)]
[view {:style style}
(doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]))
[linear-gradient {:colors [ "rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
:style st/top-gradient}]
[view st/tabs-container
(doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]]))