Skip to content

B
BasicApp
Commit c00336ff authored by shiyunjie's avatar shiyunjie
Browse files
Options

首页布局

parent 3a92acea
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1584 additions and 149 deletions
android/app/build.gradle
View file @ c00336ff
...@@ -138,6 +138,8 @@ android { ...@@ -138,6 +138,8 @@ android {
} }
dependencies { dependencies {
implementation project(':react-native-svg')
implementation project(':react-native-fast-image')
implementation project(':react-native-gesture-handler') implementation project(':react-native-gesture-handler')
implementation project(':lottie-react-native') implementation project(':lottie-react-native')
implementation project(':react-native-linear-gradient') implementation project(':react-native-linear-gradient')
......
android/app/src/main/java/com/basicapp/MainApplication.java
View file @ c00336ff
...@@ -3,6 +3,8 @@ package com.basicapp; ...@@ -3,6 +3,8 @@ package com.basicapp;
import android.app.Application; import android.app.Application;
import com.facebook.react.ReactApplication; import com.facebook.react.ReactApplication;
import com.horcrux.svg.SvgPackage;
import com.dylanvann.fastimage.FastImageViewPackage;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import com.airbnb.android.react.lottie.LottiePackage; import com.airbnb.android.react.lottie.LottiePackage;
import com.BV.LinearGradient.LinearGradientPackage; import com.BV.LinearGradient.LinearGradientPackage;
...@@ -29,6 +31,8 @@ public class MainApplication extends Application implements ReactApplication { ...@@ -29,6 +31,8 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() { protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList( return Arrays.<ReactPackage>asList(
new MainReactPackage(), new MainReactPackage(),
new SvgPackage(),
new FastImageViewPackage(),
new RNGestureHandlerPackage(), new RNGestureHandlerPackage(),
new LottiePackage(), new LottiePackage(),
new LinearGradientPackage(), new LinearGradientPackage(),
......
android/settings.gradle
View file @ c00336ff
rootProject.name = 'BasicApp' rootProject.name = 'BasicApp'
include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
include ':react-native-fast-image'
project(':react-native-fast-image').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fast-image/android')
include ':react-native-gesture-handler' include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android') project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
include ':lottie-react-native' include ':lottie-react-native'
......
ios/BasicApp.xcodeproj/project.pbxproj
View file @ c00336ff
This diff is collapsed.
package-lock.json
View file @ c00336ff
...@@ -2499,11 +2499,6 @@ ...@@ -2499,11 +2499,6 @@
"@types/yargs": "^12.0.9" "@types/yargs": "^12.0.9"
} }
}, },
"@react-native-community/async-storage": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@react-native-community/async-storage/-/async-storage-1.5.0.tgz",
"integrity": "sha512-2yE4RzQ5IL+UTPhuMY0ykNRKHf1m90jOnmp8fcDPUun5U97cXlorjI4p66ovDgF0FuOv8ZpiUKvunGy3qqBxwg=="
},
"@react-native-community/cli": { "@react-native-community/cli": {
"version": "1.9.11", "version": "1.9.11",
"resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-1.9.11.tgz", "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-1.9.11.tgz",
...@@ -4719,9 +4714,9 @@ ...@@ -4719,9 +4714,9 @@
} }
}, },
"import-fresh": { "import-fresh": {
"version": "3.0.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.0.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.1.0.tgz",
"integrity": "sha512-pOnA9tfM3Uwics+SaBLCNyZZZbK+4PTu0OPZtLlMIrv17EdBoC15S9Kn8ckJ9TZTyKb3ywNE5y1yeDxxGA7nTQ==", "integrity": "sha512-PpuksHKGt8rXfWEr9m9EHIpgyyaltBy8+eF6GJM0QCAxMgxCfucMF3mjecK2QsJr0amJW7gTqh5/wht0z2UhEQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"parent-module": "^1.0.0", "parent-module": "^1.0.0",
...@@ -4920,11 +4915,12 @@ ...@@ -4920,11 +4915,12 @@
} }
}, },
"eslint-plugin-jsx-a11y": { "eslint-plugin-jsx-a11y": {
"version": "6.2.1", "version": "6.2.3",
"resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.1.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz",
"integrity": "sha512-cjN2ObWrRz0TTw7vEcGQrx+YltMvZoOEx4hWU8eEERDnBIU00OTq7Vr+jA7DFKxiwLNv4tTh5Pq2GUNEa8b6+w==", "integrity": "sha512-CawzfGt9w83tyuVekn0GDPU9ytYtxyxyFZ3aSWROmnRRFQFT2BiPJd7jvRdzNDi6oLWaS2asMeYSNMjWTV4eNg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@babel/runtime": "^7.4.5",
"aria-query": "^3.0.0", "aria-query": "^3.0.0",
"array-includes": "^3.0.3", "array-includes": "^3.0.3",
"ast-types-flow": "^0.0.7", "ast-types-flow": "^0.0.7",
...@@ -4932,7 +4928,7 @@ ...@@ -4932,7 +4928,7 @@
"damerau-levenshtein": "^1.0.4", "damerau-levenshtein": "^1.0.4",
"emoji-regex": "^7.0.2", "emoji-regex": "^7.0.2",
"has": "^1.0.3", "has": "^1.0.3",
"jsx-ast-utils": "^2.0.1" "jsx-ast-utils": "^2.2.1"
} }
}, },
"eslint-plugin-react": { "eslint-plugin-react": {
...@@ -9451,9 +9447,9 @@ ...@@ -9451,9 +9447,9 @@
} }
}, },
"jsx-ast-utils": { "jsx-ast-utils": {
"version": "2.2.0", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.0.tgz", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.1.tgz",
"integrity": "sha512-yAmhGSzR7TsD0OQpu1AGLz8Bx84cxMqtgoJrufomY6BlveEDlREhvu1rea21936xbe5tlUh7IPda82m5ae0H8Q==", "integrity": "sha512-v3FxCcAf20DayI+uxnCuw795+oOIkVu6EnJ1+kSzhqqTZHNkTZ7B66ZgLp4oLJ/gbA64cI0B7WRoHZMSRdyVRQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"array-includes": "^3.0.3", "array-includes": "^3.0.3",
...@@ -11484,14 +11480,14 @@ ...@@ -11484,14 +11480,14 @@
} }
}, },
"react-native-fast-image": { "react-native-fast-image": {
"version": "6.0.5", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-6.0.5.tgz", "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-6.1.0.tgz",
"integrity": "sha512-xtEB/pA+jiJGdTi8eI7MKEV4cejqhf/ydt5r8EhU78YFDtppbxctNn8CBynNvlRpUjJIzVbVyggFxvZG6T2exQ==" "integrity": "sha512-ZfKNIqqed3AoY/S6ViBNG5PbaKWLHWukY3q6n6z7+CWgtibX+PxYX0rdMNQb+HLd1Sqd4/NsbrtyxCxUhVoA6Q=="
}, },
"react-native-gesture-handler": { "react-native-gesture-handler": {
"version": "1.2.2", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.2.2.tgz", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.3.0.tgz",
"integrity": "sha512-dlgd8XMXI2Aymh/C3+/FR9wzVbA8ILuBPsi4JC+HxmlpcNVXfxwMOG8JDCenPzW0CTRkWJwoIMPm2Xj0MtnIYA==", "integrity": "sha512-ASRFIXBuKRvqlmwkWJhV8yP2dTpvcqVrLNpd7FKVBFHYWr6SAxjGyO9Ik8w1lAxDhMlRP2IcJ9p9eq5X2WWeLQ==",
"requires": { "requires": {
"hoist-non-react-statics": "^2.3.1", "hoist-non-react-statics": "^2.3.1",
"invariant": "^2.2.2", "invariant": "^2.2.2",
...@@ -11570,6 +11566,27 @@ ...@@ -11570,6 +11566,27 @@
"resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.3.1.tgz", "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.3.1.tgz",
"integrity": "sha512-m9nGKYfFn6ljF1abafzF5cFaD9JCzXwj7kNE9CuF+g0TgtItH70eY2uHaCV9moENTftqd5XIS3Cx0mf4WfistA==" "integrity": "sha512-m9nGKYfFn6ljF1abafzF5cFaD9JCzXwj7kNE9CuF+g0TgtItH70eY2uHaCV9moENTftqd5XIS3Cx0mf4WfistA=="
}, },
"react-native-super-grid": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/react-native-super-grid/-/react-native-super-grid-3.0.7.tgz",
"integrity": "sha512-cjsEJ536kmWRv9UFjqer7vNLbmMYHetsOXSez8CREUknBP4z+wAUfejDwbUy/iyksK+vrQCII6dn+pUNiSkMxw==",
"requires": {
"prop-types": "^15.6.0"
}
},
"react-native-svg": {
"version": "9.5.1",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.5.1.tgz",
"integrity": "sha512-cRGfomzG/5LEwuJ6ct3m5yccckeI9aj8BNYwDPVxOeJ84LuJuvk5OqcjlYNeEzOWmWiH+QrFXfpLH1ag04bUeQ=="
},
"react-native-swiper": {
"version": "1.5.14",
"resolved": "https://registry.npmjs.org/react-native-swiper/-/react-native-swiper-1.5.14.tgz",
"integrity": "sha512-Kn0fxKooN7Shwu1qJYHB+Y8ssXXnvrIwReHXU5jCdyYNfz2QbBv0Cv3sa2Mqzr+XgzORCFFIokc8uCCUITDrVA==",
"requires": {
"prop-types": "^15.5.10"
}
},
"react-native-tab-view": { "react-native-tab-view": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.4.1.tgz", "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.4.1.tgz",
......
package.js 0 → 100755
View file @ c00336ff
var hello = require('./node_modules/react-native-update-mutlirn-hg/local-cli')
hello.run()
package.json
View file @ c00336ff
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
"postinstall-devTools": "remotedev-debugger --hostname localhost --port 5678 --injectserver" "postinstall-devTools": "remotedev-debugger --hostname localhost --port 5678 --injectserver"
}, },
"dependencies": { "dependencies": {
"@react-native-community/async-storage": "^1.4.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"lodash": "^4.17.11", "lodash": "^4.17.11",
"lottie-react-native": "^2.6.1", "lottie-react-native": "^2.6.1",
...@@ -24,6 +23,9 @@ ...@@ -24,6 +23,9 @@
"react-native-largelist-v3": "^3.0.14", "react-native-largelist-v3": "^3.0.14",
"react-native-linear-gradient": "^2.5.4", "react-native-linear-gradient": "^2.5.4",
"react-native-spring-scrollview": "^2.0.22", "react-native-spring-scrollview": "^2.0.22",
"react-native-super-grid": "^3.0.7",
"react-native-svg": "^9.5.1",
"react-native-swiper": "^1.5.14",
"react-native-update-mutlirn-hg": "^3.1.1", "react-native-update-mutlirn-hg": "^3.1.1",
"react-native-vector-icons": "^6.4.2", "react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.11.0", "react-navigation": "^3.11.0",
......
src/components/HeaderView/index.js 0 → 100644
View file @ c00336ff
/**
* @flow
*/
import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';
import { Avatar } from 'react-native-elements';
import Text from '../Text';
import { ENV, resourceURLMapping } from '../../utils/constants';
import BasicIcon from '../BasicIcon';
export function HomeHeader(props) {
return (
<View style={{
flexDirection: 'row',
alignItems: 'center',
height: 44,
width: global.SCREEN_WIDTH,
}}
>
<FastImage
style={{
width: 78,
height: 30,
marginLeft: 10,
}}
source={{
uri: `${resourceURLMapping[ENV]}logo_login_taiping.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<View
style={{
flex: 1,
height: 32,
borderRadius: 16,
marginHorizontal: 10,
backgroundColor: '#ECECF0',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text
style={{
color: '#8CA0BA',
fontSize: 14,
}}
>
{'搜索"保险服务"'}
</Text>
</View>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-end',
marginRight: 10,
}}
>
<FastImage
style={{
width: 24,
height: 24,
marginRight: 10,
}}
source={{
uri: `${resourceURLMapping[ENV]}icon_message77.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
</View>
</View>
);
}
export function UserPageHeader(props) {
return (
<View style={{
flexDirection: 'row',
alignItems: 'center',
height: 44,
width: global.SCREEN_WIDTH,
}}
>
<FastImage
style={{
width: 36,
height: 36,
marginHorizontal: 15,
borderRadius: 18,
}}
source={{
uri: `${resourceURLMapping[ENV]}icon_avatar_default.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<View
style={{
flex: 1,
height: 36,
flexDirection: 'column',
alignItems: 'flex-start',
}}
>
<Text
style={{
color: '#333',
fontSize: 14,
}}
>
{ props.phone }
</Text>
<View
style={{
flex: 1,
height: 18,
flexDirection: 'row',
alignItems: 'stretch',
}}
>
<FastImage
style={{
width: 68,
height: 16,
}}
source={{
uri: `${resourceURLMapping[ENV]}pic_user_dazhong_vip.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<View style={{ width: 10 }} />
<BasicIcon suite="Foundation" name="laptop" size={16} color={props.color} />
<View style={{ width: 10 }} />
<BasicIcon suite="Ionicons" name="ios-happy" size={16} color={props.color} />
</View>
</View>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-end',
marginRight: 10,
}}
>
<FastImage
style={{
width: 24,
height: 24,
marginRight: 15,
}}
source={{
uri: `${resourceURLMapping[ENV]}icon_message77.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<BasicIcon suite="Foundation" name="widget" size={24} color="#606273" />
</View>
</View>
);
}
export default {
HomeHeader,
UserPageHeader,
};
src/components/Swiper/index.js 0 → 100644
View file @ c00336ff
/**
* @flow
*/
import React from 'react';
import SwipeView from 'react-native-swiper';
type Props = {
height: number,
width: number
}
function SwiperBanner(props:Props) {
console.log('SwiperBanner',props)
return (
<SwipeView
showsButtons={false}
autoplay
height={props.height}
width={props.width}
autoplayTimeout={5}
paginationStyle={{ bottom: 0 }}
>
{
props.children
}
</SwipeView>
);
}
export default SwiperBanner;
src/pages/home/FramePage.js
View file @ c00336ff
...@@ -8,18 +8,21 @@ ...@@ -8,18 +8,21 @@
*/ */
import React, { Component } from 'react'; import React, { Component } from 'react';
import HeaderImageScrollView from 'react-native-image-header-scroll-view'; import { SpringScrollView } from 'react-native-spring-scrollview';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import CommonLottieFooter from 'react-native-spring-scrollview/Customize/CommonLottieFooter';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { import {
StyleSheet, StyleSheet,
View, View,
RefreshControl,
TouchableOpacity,
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Text from '../../components/Text';
import { push } from '../../BasicNavigator/actions'; import { push } from '../../BasicNavigator/actions';
import { renderByType } from './renderUtil';
import { HomeHeader } from '../../components/HeaderView';
const data = require('./home.json');
type Props = {}; type Props = {};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
...@@ -27,66 +30,62 @@ const styles = StyleSheet.create({ ...@@ -27,66 +30,62 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
backgroundColor: '#F5FCFF', backgroundColor: '#F5FCFF',
}, },
titleContainer: {
flex: 1,
alignSelf: 'stretch',
justifyContent: 'flex-end',
alignItems: 'center'
},
imageTitle: {
color: 'white',
backgroundColor: 'transparent',
fontSize: 24
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
}); });
class NativeComponentList extends Component<Props> { const step = 13;
class FramePage extends Component<Props> {
constructor(props) {
super(props);
this.state = {
count: step,
allLoaded: false,
};
this.scrollView = null;
}
_onRefresh = () => {
setTimeout(() => {
this.scrollView.endRefresh();
this.setState({ count: step, allLoaded: false });
}, 3000);
};
_onLoading = () => {
setTimeout(() => {
this.scrollView.endLoading();
this.setState(p => ({
count: p.count + step,
allLoaded: false,
}));
}, 3000);
};
render() { render() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<HeaderImageScrollView <HomeHeader />
maxHeight={200} <SpringScrollView
minHeight={50} ref={ref => (this.scrollView = ref)}
fadeOutForeground style={styles.container}
overScrollMode="never" inverted={false}
overlayColor="red" onRefresh={this._onRefresh}
maxOverlayOpacity={0.4} //onLoading={this._onLoading}
renderTouchableFixedForeground={() => ( // allLoaded={this.state.allLoaded}
<View style={{ height: 200, justifyContent: 'center', alignItems: 'center' }}> refreshHeader={CommonLottieHeader}
<TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}> //loadingFooter={CommonLottieFooter}
<Text style={styles.buttonText}>Click Me!</Text>
</TouchableOpacity>
</View>
)}
scrollViewBackgroundColor="#ddddff"
refreshControl={
<RefreshControl
refreshing={false}
// onRefresh={this._onRefresh.bind(this)}
tintColor="red"
/>
}
renderForeground={() => (
<View style={styles.titleContainer}>
<Text style={styles.imageTitle}>Cat</Text>
</View>
)}
foregroundParallaxRatio={1}
> >
<View style={{ height: 100, backgroundColor: '#4CAF50' }} /> {data.map((item, index) => (
<View style={{ height: 100, backgroundColor: '#F44336' }} /> renderByType(item.type)({
<View style={{ height: 100, backgroundColor: '#009688' }} /> ...item,
<View style={{ height: 100, backgroundColor: '#03A9F4' }} /> width: global.SCREEN_WIDTH,
<View style={{ height: 100, backgroundColor: '#FF9800' }} /> })
<View style={{ height: 100, backgroundColor: '#673AB7' }} /> ))}
<View style={{ height: 100, backgroundColor: '#795548' }} /> </SpringScrollView>
<View style={{ height: 100, backgroundColor: '#FFEB3B' }} />
</HeaderImageScrollView>
</View> </View>
); );
} }
...@@ -98,5 +97,10 @@ function actionMapping(dispatch) { ...@@ -98,5 +97,10 @@ function actionMapping(dispatch) {
push: compose(dispatch, push), push: compose(dispatch, push),
}; };
} }
function propsMapping({ theme }) {
return {
theme,
};
}
export default connect(null, actionMapping)(NativeComponentList); export default connect(propsMapping, actionMapping)(FramePage);
src/pages/home/JSComponentList.js
View file @ c00336ff
/** /**
* Sample React Native App * Sample React Native App
* https://github.com/facebook/react-native * https://github.com/facebook/react-native
...@@ -7,40 +8,118 @@ ...@@ -7,40 +8,118 @@
*/ */
import React, { Component } from 'react'; import React, { Component } from 'react';
import { SpringScrollView } from 'react-native-spring-scrollview';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import { connect } from 'react-redux';
import { compose } from 'redux';
import FastImage from 'react-native-fast-image';
import { import {
StyleSheet, StyleSheet,
View, View,
TouchableOpacity,
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Text from '../../components/Text'; import Text from '../../components/Text';
import BasicIcon from '../../components/BasicIcon';
import { push } from '../../BasicNavigator/actions'; import { push } from '../../BasicNavigator/actions';
import { renderByType } from './userRenderUtil';
import { UserPageHeader } from '../../components/HeaderView';
import { resourceURLMapping, ENV } from '../../utils/constants';
const data = require('./user.json');
type Props = {}; type Props = {};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF', backgroundColor: '#F5FCFF',
}, },
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
}); });
class JSComponentList extends Component<Props> { const step = 13;
class FramePage extends Component<Props> {
constructor(props) {
super(props);
this.state = {
count: step,
allLoaded: false,
};
this.scrollView = null;
}
_onRefresh = () => {
setTimeout(() => {
this.scrollView.endRefresh();
this.setState({ count: step, allLoaded: false });
}, 3000);
};
render() { render() {
console.log('MainPage', this.props); const { theme } = this.props;
return ( return (
<View style={styles.container}> <View style={[styles.container,{backgroundColor: 'white'}]}>
<TouchableOpacity onPress={() => { this.props.push('JSPage', {test:1}); }}> <UserPageHeader phone="138****8888" color={theme.ThemeColor} />
<Text style={styles.instructions}>JSComponentList</Text> <SpringScrollView
</TouchableOpacity> ref={ref => (this.scrollView = ref)}
style={[styles.container,{backgroundColor: 'white'}]}
inverted={false}
onRefresh={this._onRefresh}
//onLoading={this._onLoading}
// allLoaded={this.state.allLoaded}
refreshHeader={CommonLottieHeader}
//loadingFooter={CommonLottieFooter}
>
<View style={{ marginLeft: 15 }}>
<FastImage
style={{
width: global.SCREEN_WIDTH - 30,
height: (global.SCREEN_WIDTH - 30) / 345 * 140,
}}
source={{
uri: `${resourceURLMapping[ENV]}pic_user_top_tpjb.png`,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<View
style={{
width: global.SCREEN_WIDTH - 30,
height: (global.SCREEN_WIDTH - 30) / 345 * 120,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 3,
}}
>
<Text style={{ color: 'white', fontSize: 14,}}>
太平金币
</Text>
<Text style={{ color: 'white',fontWeight: '400', fontSize: 40, }}>
1888
</Text>
<Text style={{ color: 'white', fontSize: 12, }}>
{'查看详情 >'}
</Text>
</View>
</View>
{data.map((item, index) => (
renderByType(item.type)({
...item,
width: global.SCREEN_WIDTH,
})
))}
</SpringScrollView>
</View> </View>
); );
} }
...@@ -52,5 +131,10 @@ function actionMapping(dispatch) { ...@@ -52,5 +131,10 @@ function actionMapping(dispatch) {
push: compose(dispatch, push), push: compose(dispatch, push),
}; };
} }
function propsMapping({ theme }) {
return {
theme,
};
}
export default connect(null, actionMapping)(JSComponentList); export default connect(propsMapping, actionMapping)(FramePage);
src/pages/home/home.json 0 → 100644
View file @ c00336ff
[
{
"type": 0,
"title": "",
"data": [
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/dawanqu1.png",
"tagUrl": "https://mp.weixin.qq.com/s/IUlnN-Yh12reG96WlMCCgQ",
"pageType": "HTML",
"authorization": "",
"login": "",
"title": "",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/tuangou1.png",
"tagUrl": "http://mall.itaiping.com/itaiping-mobile/activityPage.html?activityIndex=0&activitySign=tuangou",
"pageType": "HTML",
"authorization": "",
"login": "1",
"title": "",
"detail": "login=1&webViewLogin=1",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/ttcjbanner.png",
"tagUrl": "34",
"pageType": "RN",
"authorization": "",
"login": "1",
"title": "",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/banner04.jpg",
"tagUrl": "",
"pageType": "",
"authorization": "",
"login": "",
"title": "",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
}
],
"icon": "",
"tagUrl": "",
"columnCount": "",
"delay": "",
"width": 355,
"height": 168
},
{
"type": 1,
"title": "",
"data": [
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_service_wodebaodan.png",
"tagUrl": "InsuranceList",
"pageType": "native",
"authorization": "1",
"login": "1",
"title": "我的保单",
"detail": "menu=service",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_service_baoan.png",
"tagUrl": "23",
"pageType": "RN",
"authorization": "",
"login": "1",
"title": "报案",
"detail": "menu=service",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_service_toubaojincheng.png",
"tagUrl": "ClaimSearch",
"pageType": "native",
"authorization": "1",
"login": "1",
"title": "理赔查询",
"detail": "entr=renshou,caixian,yanglao,xianggang&menu=service",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_service_shishidai.png",
"tagUrl": "22",
"pageType": "RN",
"authorization": "1",
"login": "1",
"title": "实时贷",
"detail": "menu=service&banner=http://58.49.129.4/static/rn/src/img/pic_shishidai_banner2.png&content=借款人(保险服务密码所有人)以在太平人寿保险有限公司所持有的可借款保险合同的现金价值为质，同意开通“实时货”业务并在“实时货”业务有效期内可向保险公司申请借、还款。\n注：货款时，仅支持投、被保人均为本人及投保人为本人、协议签订及申请借款时被保人为未成年人的保单。\n",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_service_huizhihuifang.png",
"tagUrl": "Receipt",
"pageType": "native",
"authorization": "1",
"login": "1",
"title": "寿险电子保单",
"detail": "menu=service",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_service_baodanxuqijiaofei.png",
"tagUrl": "RenewalPolicy",
"pageType": "native",
"authorization": "1",
"login": "1",
"title": "保单续期缴费",
"detail": "menu=service",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_service_wodebaozhang.png",
"tagUrl": "AssetList",
"pageType": "native",
"authorization": "1",
"login": "1",
"title": "我的养老保障",
"detail": "menu=service",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_service_tuanxianlipeishenqing.png",
"tagUrl": "21",
"pageType": "RN",
"authorization": "1",
"login": "1",
"title": "团险理赔申请",
"detail": "menu=service",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
}
],
"icon": "",
"tagUrl": "",
"columnCount": "",
"delay": "",
"width": 84,
"height": 64
},
{
"type": 2,
"title": "活动",
"data": [
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/pic_banner_activity_invite6.png",
"tagUrl": "29",
"pageType": "RN",
"authorization": "",
"login": "1",
"title": "邀请有礼",
"detail": "邀好友，享厚礼，成功邀请好友注册太平通app即可获金币哦！",
"titleColor": "#333333",
"detailColor": "#999999",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/zhouzhoule.png",
"tagUrl": "34",
"pageType": "RN",
"authorization": "",
"login": "1",
"title": "周周乐",
"detail": "万元豪礼周周乐",
"titleColor": "#333333",
"detailColor": "#999999",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/pic_banner_activity_running6.png",
"tagUrl": "30",
"pageType": "RN",
"authorization": "",
"login": "1",
"title": "健步行",
"detail": "您的健康运动专家，行无止境，乐享生活，从你我做起！",
"titleColor": "#333333",
"detailColor": "#999999",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/qiandaoyoujiang.png",
"tagUrl": "26",
"pageType": "RN",
"authorization": "",
"login": "1",
"title": "签到有礼",
"detail": "每日签到集金币，连续签到，还可获得额外奖励！",
"titleColor": "#333333",
"detailColor": "#999999",
"badge": "",
"icon": ""
}
],
"tagUrl": "",
"icon": "",
"columnCount": "",
"delay": "",
"width": 192,
"height": 108
},
{
"type": 3,
"title": "增值服务",
"data": [
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/pic_home_shop_huiyuan2.png",
"tagUrl": "http://sit1.tp95589.com/healthCenterWeb/#/index?firstVC=1",
"pageType": "HTML",
"authorization": "",
"login": "1",
"title": "",
"detail": "login=1&webViewLogin=1",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/pic_home_shop_haiwai2.png",
"tagUrl": "http://smarket.tp95589.com/itaiping-mobile/voucherCenter/index?firstVC=1",
"pageType": "HTML",
"authorization": "",
"login": "1",
"title": "",
"detail": "login=1&webViewLogin=1",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/pic_home_shop_fupin2.png",
"tagUrl": "http://smarket.tp95589.com/itaiping-mobile/scoreService.html?firstVC=1",
"pageType": "HTML",
"authorization": "",
"login": "1",
"title": "",
"detail": "login=1&webViewLogin=1",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
}
],
"tagUrl": "",
"icon": "",
"columnCount": "",
"delay": "login=1&webViewLogin=1",
"width": 122,
"height": 130
}
]
src/pages/home/renderUtil.js 0 → 100644
View file @ c00336ff
/**
* @flow
*/
import React from 'react';
import { View, ScrollView,
} from 'react-native';
import FastImage from 'react-native-fast-image';
import { FlatGrid } from 'react-native-super-grid';
import Text from '../../components/Text';
import SwiperView from '../../components/Swiper';
/**
*
首页
type 0 轮播图
type 1 九宫格
type 2 活动
type 3 商品
服务
type 4 最近使用
type 5 标题
type 6 九宫格
type 7 图片展示
type 8 公司名字九宫格
type 9 轮播图
我的
type 10 3列九宫格
type 11 带标题4列的九宫格
type 12 icon+title >
* @type {number}
*/
const BANNER = 0;
const GRID = 1;
const ACTIVITY = 2;
const EXTRASRV = 3;
export function swiperItem(data) {
const swiperHeight = data.width / 2.7;
console.log('width:', data.width, swiperHeight);
return (
data.data.map((item, index) => (
<View
key={`${item.imgUrl}${index}`}
style={{
width: data.width,
height: swiperHeight,
paddingHorizontal: 10,
paddingTop: 10,
}}
>
<FastImage
style={{ width: data.width - 20, height: swiperHeight - 10 }}
source={{
uri: item.imgUrl,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
</View>
))
);
}
export function renderBanner(props) {
console.log('renderBanner', props);
return (
<View
key="SwiperView"
style={{
height: props.height,
}}
>
<SwiperView
height={props.height}
width={props.width}
>
{swiperItem(props)}
</SwiperView>
</View>
);
}
export function renderGrid(props) {
const gridwidth = ((props.width) / 4);
console.log('renderGrid:', gridwidth);
return (
<FlatGrid
itemDimension={gridwidth}
items={props.data}
spacing={0}
renderItem={({ item,index }) => (
<View
key={`${index}${item.imgUrl}`}
style={{
width: gridwidth - 1,
justifyContent: 'center',
alignItems: 'center',
marginVertical: 10,
}}
>
<FastImage
style={{ width: 36, height: 36 }}
source={{
uri: item.imgUrl,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<Text
style={{
fontSize:14,
color:'#333',
marginTop:5,
}}
>
{item.title}
</Text>
</View>
)}
/>
);
}
export function activityItem(item) {
return (
<View
style={{
width: 192,
alignItems: 'stretch',
marginLeft: 10,
}}
>
<FastImage
style={{ width: 192, height: 108 }}
source={{
uri: item.imgUrl,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<Text
style={{
fontSize: 16,
marginTop: 8,
fontColor: '#20253C',
}}
>
{item.title}
</Text>
<Text
style={{
fontSize: 14,
marginVertical: 8,
color: item.detailColor,
}}
numberOfLines={2}
>
{item.detail}
</Text>
</View>
);
}
export function renderTitle(title,marginLeft?) {
return (
<View>
<Text
style={{
fontSize: 18,
marginLeft: marginLeft || 10,
marginTop: 10,
fontColor: '#20253C',
}}
>
{title}
</Text>
</View>
);
}
export function renderActivity(props) {
return (
<View>
{
renderTitle(props.title)
}
<ScrollView
style={{
marginVertical: 14,
width: props.width,
height: 176,
}}
horizontal
showsHorizontalScrollIndicator={false}
>
{props.data.map((item, index) => (
activityItem(item)
))
}
</ScrollView>
</View>
);
}
export function renderExtraSrv(props) {
return (
<View>
{
renderTitle(props.title)
}
<ScrollView
style={{
marginVertical: 14,
width: props.width,
}}
horizontal
showsHorizontalScrollIndicator={false}
>
{props.data.map((item, index) => (
<FastImage
style={{
width: 122,
height: 130,
marginLeft: 10,
}}
source={{
uri: item.imgUrl,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
))
}
</ScrollView>
</View>
);
}
export function renderByType(type) {
switch (type) {
case BANNER:
return renderBanner;
case GRID:
return renderGrid;
case ACTIVITY:
return renderActivity;
case EXTRASRV:
return renderExtraSrv;
default:
return () => {
};
}
}
export default {};
src/pages/home/user.json 0 → 100644
View file @ c00336ff
[
{
"type": 10,
"title": "",
"data": [
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_bd_baozhangzhong3.png",
"tagUrl": "InsuranceList",
"pageType": "native",
"authorization":"1",
"login":"1",
"title": "保障中",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_bd_yizhongzhi3.png",
"tagUrl": "InsuranceList",
"pageType": "native",
"authorization":"1",
"login":"1",
"title": "已终止",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_sc_wodebaodan3.png",
"tagUrl": "InsuranceList",
"pageType": "native",
"authorization":"1",
"login":"1",
"title": "我的保单",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_sc_gouwuche3.png",
"tagUrl": "http://smarket.tp95589.com/itaiping-mobile/myCart?firstVC=1",
"pageType": "HTML",
"authorization":"",
"login":"1",
"title": "购物车",
"detail": "login=1&webViewLogin=1",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_sc_daifukuan3.png",
"tagUrl": "http://itaiping.tp95589.com/mobile/userCenter/myOrder.html?status=1&firstVC=1",
"pageType": "HTML",
"authorization":"",
"login":"1",
"title": "待付款",
"detail": "login=1&webViewLogin=1",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_sc_dingdan3.png",
"tagUrl": "http://itaiping.tp95589.com/mobile/userCenter/myOrder.html?firstVC=1",
"pageType": "HTML",
"authorization":"",
"login":"1",
"title": "商城订单",
"detail": "login=1&webViewLogin=1",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
}
],
"tagUrl": "",
"icon": "",
"columnCount": "",
"delay": "",
"width": 115,
"height": 76
},
{
"type": 11,
"title": "会员权益",
"data": [
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_vip_task3.png",
"tagUrl": "24",
"pageType": "RN",
"authorization":"",
"login":"1",
"title": "金币任务",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_vip_coupon3.png",
"tagUrl": "MyCoupon",
"pageType": "native",
"authorization":"",
"login":"1",
"title": "我的优惠券",
"detail": "tagUrl=http://smarket.tp95589.com/marketing-mobile/mobile/couponCenter?channel=app",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_vip_invite3.png",
"tagUrl": "29",
"pageType": "RN",
"authorization":"",
"login":"1",
"title": "邀请有礼",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/yueyuechoujiang.png",
"tagUrl": "34",
"pageType": "RN",
"authorization":"",
"login":"1",
"title": "周周乐",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
}
],
"tagUrl": "",
"icon": "",
"columnCount": "",
"delay": "",
"width": 86,
"height": 76
},
{
"type": 12,
"title": "",
"data": [
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_mine_conacts3.png",
"tagUrl": "PersonInfo",
"pageType": "native",
"authorization":"",
"login":"1",
"title": "个人信息",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_mine_safe3.png",
"tagUrl": "SecurityCenter",
"pageType": "native",
"authorization":"",
"login":"1",
"title": "安全中心",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_mine_information3.png",
"tagUrl": "Feedback",
"pageType": "native",
"authorization":"",
"login":"1",
"title": "问题反馈",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
},
{
"imgUrl": "http://58.49.129.4/static/rn/src/img/icon_mine_information3.png",
"tagUrl": "HelpCenter",
"pageType": "native",
"authorization":"",
"login":"1",
"title": "帮助中心",
"detail": "",
"titleColor": "#333333",
"detailColor": "",
"badge": "",
"icon": ""
}
],
"tagUrl": "",
"icon": "",
"columnCount": "",
"delay": "",
"width": 375,
"height": 50
}
]
src/pages/home/userRenderUtil.js 0 → 100644
View file @ c00336ff
/**
* @flow
*/
import React from 'react';
import {
View,
} from 'react-native';
import { ListItem } from 'react-native-elements';
import FastImage from 'react-native-fast-image';
import { FlatGrid } from 'react-native-super-grid';
import Text from '../../components/Text';
import { renderTitle } from './renderUtil';
import BasicIcon from '../../components/BasicIcon';
/**
*
首页
type 0 轮播图
type 1 九宫格
type 2 活动
type 3 商品
服务
type 4 最近使用
type 5 标题
type 6 九宫格
type 7 图片展示
type 8 公司名字九宫格
type 9 轮播图
我的
type 10 3列九宫格
type 11 带标题4列的九宫格
type 12 icon+title >
* @type {number}
*/
const THREE = 10;
const GRID = 11;
const TABLE = 12;
const marginLeft = 10;
function renderGrid(props) {
const count = props.count || 4;
const gridwidth = ((props.width - marginLeft * 2) / count);
return (
<View
key={`user${count}columnGrid`}
style={{
marginHorizontal: marginLeft,
borderRadius: 5,
backgroundColor: 'white',
elevation: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: '#D0DBFF',
shadowOpacity: 1,
shadowRadius: 5,
marginTop: props.marginTop || 10,
marginBottom: props.marginBottom || 10,
}}
>
<FlatGrid
itemDimension={gridwidth}
items={props.data}
spacing={0}
renderItem={({ item, index }) => (
<View
key={`${index}${item.imgUrl}`}
style={{
width: gridwidth - 1,
justifyContent: 'center',
alignItems: 'center',
marginVertical: 10,
}}
>
<FastImage
style={{ width: 32, height: 32 }}
source={{
uri: item.imgUrl,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
<Text
style={{
marginTop: 5,
color: '#333',
fontSize: 12,
}}
>
{item.title}
</Text>
</View>
)}
/>
</View>
);
}
function render3Column(props) {
return renderGrid({ ...props, count: 3, marginTop: -1 });
}
function render4Column(props) {
return (
<View>
<View style={{ height: 10, backgroundColor: '#F4F5F5' }} />
{
renderTitle(props.title, marginLeft)
}
{
renderGrid(props)
}
</View>
);
}
function renderTable(props) {
return (
<View>
{
props.data.map((item, i) => (
<ListItem
containerStyle={{borderBottomWidth: 0.3, borderBottomColor:'#ccc'}}
key={`renderTable${i}`}
title={item.title}
titleStyle={{ color: '#666', fontSize: 14 }}
leftElement={(
<FastImage
style={{ width: 24, height: 24 }}
source={{
uri: item.imgUrl,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
)}
rightElement={(
<BasicIcon
suite="Ionicons"
name="ios-arrow-forward"
size={16}
color="#666"
/>
)}
/>
))
}
</View>
);
}
export function renderByType(type) {
switch (type) {
case THREE:
return render3Column;
case GRID:
return render4Column;
case TABLE:
return renderTable;
default:
return () => {
};
}
}
export default {};
src/pages/imageHeaderScrollView/index.js 0 → 100644
View file @ c00336ff
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from 'react';
import HeaderImageScrollView from 'react-native-image-header-scroll-view';
import {
StyleSheet,
View,
RefreshControl,
TouchableOpacity,
} from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Text from '../../components/Text';
import { push } from '../../BasicNavigator/actions';
type Props = {};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
titleContainer: {
flex: 1,
alignSelf: 'stretch',
justifyContent: 'flex-end',
alignItems: 'center'
},
imageTitle: {
color: 'white',
backgroundColor: 'transparent',
fontSize: 24
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
class ImageHeaderScrollView extends Component<Props> {
render() {
return (
<View style={styles.container}>
<HeaderImageScrollView
maxHeight={200}
minHeight={50}
fadeOutForeground
overScrollMode="never"
overlayColor="red"
maxOverlayOpacity={0.4}
renderTouchableFixedForeground={() => (
<View style={{ height: 200, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity onPress={() => console.log('tap!!')} style={styles.button}>
<Text style={styles.buttonText}>Click Me!</Text>
</TouchableOpacity>
</View>
)}
scrollViewBackgroundColor="#ddddff"
refreshControl={
<RefreshControl
refreshing={false}
// onRefresh={this._onRefresh.bind(this)}
tintColor="red"
/>
}
renderForeground={() => (
<View style={styles.titleContainer}>
<Text style={styles.imageTitle}>Cat</Text>
</View>
)}
foregroundParallaxRatio={1}
>
<View style={{ height: 100, backgroundColor: '#4CAF50' }} />
<View style={{ height: 100, backgroundColor: '#F44336' }} />
<View style={{ height: 100, backgroundColor: '#009688' }} />
<View style={{ height: 100, backgroundColor: '#03A9F4' }} />
<View style={{ height: 100, backgroundColor: '#FF9800' }} />
<View style={{ height: 100, backgroundColor: '#673AB7' }} />
<View style={{ height: 100, backgroundColor: '#795548' }} />
<View style={{ height: 100, backgroundColor: '#FFEB3B' }} />
</HeaderImageScrollView>
</View>
);
}
}
function actionMapping(dispatch) {
return {
push: compose(dispatch, push),
};
}
export default connect(null, actionMapping)(ImageHeaderScrollView);
src/pages/shadowDemo/index.js 0 → 100644
View file @ c00336ff
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import Svg, {
Defs,
RadialGradient,
Stop,
Ellipse,
Circle,
Rect,
G
} from 'react-native-svg';
import {
View,
ScrollView,
} from 'react-native';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';
type
Props = {
};
function shadowPage(props:Props) {
return (
<View style={Styles.container}>
<NavigationBar
title="阴影"
left={<BackButton />}
/>
<ScrollView>
<View style={{ alignItems: 'center' }}>
<Svg
style={{ marginHorizontal: 25, top: -6 }}
height="24"
width={global.SCREEN_WIDTH - 50}
>
<Defs>
<RadialGradient
id="grad"
cx={global.SCREEN_WIDTH / 2 - 25}
cy="12"
rx="170"
ry="13"
fx={`${global.SCREEN_WIDTH / 2 - 25}`}
fy="12"
gradientUnits="userSpaceOnUse"
>
<Stop
offset="0"
stopColor="#ddd"
stopOpacity="1"
/>
<Stop
offset="1"
stopColor="#F5FCFF"
stopOpacity="1"
/>
</RadialGradient>
</Defs>
<Ellipse cx={global.SCREEN_WIDTH / 2 - 25} cy="12" rx="170" ry="13" fill="url(#grad)" />
</Svg>
</View>
</ScrollView>
</View>
);
}
function actionMapping(dispatch) {
return {
pushTo: compose(dispatch, push),
};
}
function propsMapping({ theme }) {
return {
theme,
};
}
export default connect(propsMapping, actionMapping)(shadowPage);
src/pages/waterListDemo/index.js
View file @ c00336ff
...@@ -16,9 +16,12 @@ import { ...@@ -16,9 +16,12 @@ import {
import { WaterfallList } from 'react-native-largelist-v3'; import { WaterfallList } from 'react-native-largelist-v3';
import { compose } from 'redux'; import { compose } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import FastImage from 'react-native-fast-image';
import { push } from '../../BasicNavigator/actions'; import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar'; import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton'; import BackButton from '../../components/BackButton';
import { ENV, resourceURLMapping } from '../../utils/constants';
const cookData = require('./data.json').data.list; const cookData = require('./data.json').data.list;
...@@ -38,7 +41,16 @@ const styles = StyleSheet.create({ ...@@ -38,7 +41,16 @@ const styles = StyleSheet.create({
class WaterList extends Component<Props> { class WaterList extends Component<Props> {
state = { data: [...cookData, ...cookData, ...cookData, ...cookData, ...cookData] }; state = { data: [...cookData, ...cookData, ...cookData, ...cookData, ...cookData] };
_renderItem = item => <Image source={{ uri: item.showimg }} style={{ flex: 1, margin: 5 }} />; _renderItem = item => (
<FastImage
style={{ flex: 1, margin: 5 }}
source={{
uri: item.showimg,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.stretch}
/>
);
render() { render() {
return ( return (
......
src/utils/ApiConfig.js deleted 100755 → 0
View file @ 3a92acea
///**
// * @flow
// * Created by shiyunjie on 2018/8/13.
// */
//import { System } from './index';
//
//const base = {
// // baseURL: System.iOS ? 'http://localhost:3000/api' : 'http://192.168.31.236:3000/api',
//
// // baseURL:iOS?'http://localhost:1234/api':'http://10.0.2.2:1234/api',
//
// // baseURL:!iOS?'http://localhost:1234/api':'http://172.16.17.61:1234/api',
//
// // baseURL :__DEV__ ? iOS?'http://localhost:3000/api':'http://172.16.17.11:3000/api' : 'http://shitu.leanapp.cn/api'
// // baseURL: 'http://shitu.leanapp.cn/api',
// baseURL: 'http://127.0.0.1:7001'
//};
//
//const ApiConfig = {
// api: {
// userToken: base.baseURL + '/userToken',
// shitu: {
// detailURL: base.baseURL + '/detailUrl'
// },
// gank: {
// listData: base.baseURL + '/gank/listData'
// },
// news: {
// list: base.baseURL + '/news'
// },
// user: {
// login: base.baseURL + '/user/login'
// },
// qiniu: {
// upLoadToken: base.baseURL + '/uploadToken'
// },
// test: {
// test: base.baseURL + '/test'
// }
// },
// qiniu: {
// // upload: 'http://upload-z2.qiniu.com';
// // upload: 'http://up-z2.qiniup.com',
// upload: 'http://up-z0.qiniup.com'
// }
//};
//
//export { ApiConfig };
updateSIT.json 0 → 100755
View file @ c00336ff
{
"ios": {
"binary": "1.0.4",
"url": "https://fir.im/f9ay",
"patch":"http://192.168.3.13/IXX/_iOSPPK"
},
"android": {
"binary": "1.0.4",
"url": "https://fir.im/qbsy",
"patch":"http://192.168.3.13/_androidPPK"
},
"buildDate":"_buildDate",
"buildBy":"_buildBy"
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment