Skip to content

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

样式修改，组件列表

parent 701fd579
Hide whitespace changes
Inline Side-by-side
Showing with 606 additions and 290 deletions
src/BasicNavigator/navigationStack.js
View file @ 72a7b966
......@@ -6,12 +6,15 @@ import {
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import JSPage from '../jsComponent/JSPage';
import FramePage from '../home/FramePage';
import ThemePage from '../changeThemePage';
import NativeComponentList from '../home/NativeComponentList';
import JSComponentList from '../home/JSComponentList';
import NativePage from '../nativeComponent/NativePage';
import JSPage from '../pages/navigationDemo/JSPage';
import FramePage from '../pages/home/FramePage';
import ThemePage from '../pages/changeThemePage';
import NativeComponentList from '../pages/home/NativeComponentList';
import JSComponentList from '../pages/home/JSComponentList';
import SectionListDemo from '../pages/sectionListDemo';
import NativePage from '../pages/navigationDemo/NativePage';
import ButtonPage from '../pages/buttonDemo';
import WaterList from '../pages/waterListDemo';
import { initialRouteName, RootPageInitialName } from '../utils/constants';
import { TabOptions } from '../components/TabOptions';
......@@ -81,6 +84,15 @@ const navigator = createStackNavigator({
ThemePage: {
screen: ThemePage,
},
SectionList: {
screen: SectionListDemo,
},
ButtonPage: {
screen: ButtonPage,
},
WaterList: {
screen: WaterList,
},
}, {
initialRouteName,
headerMode: 'none',
......
src/components/NavigationBar/index.js
View file @ 72a7b966
......@@ -79,14 +79,14 @@ function NavigationBar(props: NavBarPropsType) {
const {
style, titleStyle, left, onPress, textStyle, fontStyle, title, right, theme,
} = props;
if (theme.navEndColor) {
if (theme.ThemeEndColor) {
return (
<LinearGradient
start={{ x: 0.0, y: 0.25 }}
end={{ x: 0.5, y: 1.0 }}
locations={[0, 1]}
colors={[theme.themeColor, theme.navEndColor]}
style={[styles.navBarContainer, { backgroundColor: theme.themeColor }, style]}
colors={[theme.ThemeColor, theme.ThemeEndColor]}
style={[styles.navBarContainer, { backgroundColor: theme.ThemeColor }, style]}
>
<View style={[styles.left, titleStyle]}>{left}</View>
<TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}>
......@@ -97,7 +97,7 @@ function NavigationBar(props: NavBarPropsType) {
);
}
return (
<View style={[styles.navBarContainer, { backgroundColor: theme.themeColor }, style]}>
<View style={[styles.navBarContainer, { backgroundColor: theme.ThemeColor }, style]}>
<View style={[styles.left, titleStyle]}>{left}</View>
<TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}>
<Text style={[styles.title, textStyle, fontStyle]}>{title}</Text>
......
src/components/TabOptions/TabButton.js
View file @ 72a7b966
/**
* @flow
* Created by Rabbit on 2019-04-30.
* Created by shiyunjie on 2019-04-30.
*/
import React, { Component } from 'react';
import { connect } from 'react-redux';
......@@ -13,7 +13,7 @@ type Props = {}
class TabButton extends Component<Props> {
render() {
const { theme, iconSuite, tabBarIconName, tabBarTitle, focused } = this.props
const color = focused ? theme.themeColor : theme.Colors.charcoal;
const color = focused ? theme.ThemeColor : theme.Colors.charcoal;
return (
<View style={{ alignItems: 'center' }}>
<Index
......
src/components/TabOptions/index.js
View file @ 72a7b966
/**
* @flow
* Created by Rabbit on 2019-04-30.
* Created by shiyunjie on 2019-04-30.
*/
import React from 'react';
......
src/components/ThemeButton/index.js
View file @ 72a7b966
/**
* @flow
* Created by Rabbit on 2019-04-30.
* Created by shiyunjie on 2019-04-30.
*/
import React from 'react';
import { connect } from 'react-redux';
import { Button } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';
function ThemeButton(props) {
type Props = {
theme: Object,
buttonStyle: Object,
}
function ThemeButton(props: Props) {
const { theme, buttonStyle } = props;
if (theme.navEndColor) {
if (buttonStyle && buttonStyle.backgroundColor) {
return (
<Button
{...props}
ViewComponent={LinearGradient} // Don't forget this!
buttonStyle={[buttonStyle, { backgroundColor: theme.themeColor }]}
linearGradientProps={{
colors: [theme.themeColor, theme.navEndColor],
start: { x: 0, y: 0.5 },
end: { x: 1, y: 0.5 },
}}
buttonStyle={[{ backgroundColor: theme.ThemeColor }, buttonStyle]}
/>
);
}
return (
<Button
{...props}
buttonStyle={[buttonStyle, { backgroundColor: theme.themeColor }]}
ViewComponent={LinearGradient} // Don't forget this!
buttonStyle={[{ backgroundColor: theme.ThemeColor }, buttonStyle]}
linearGradientProps={{
colors: [theme.ThemeColor, theme.ThemeEndColor],
start: { x: 0, y: 0.5 },
end: { x: 1, y: 0.5 },
}}
/>
);
}
......
src/pages/buttonDemo/index.js 0 → 100644
View file @ 72a7b966
/**
* 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 {
View,
ScrollView,
} from 'react-native';
import Button from '../../components/ThemeButton';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';
type
Props = {
theme: Object,
};
function ButtonPage(props:Props) {
const { theme } = props;
return (
<View style={Styles.container}>
<NavigationBar
title="button"
left={<BackButton />}
/>
<ScrollView>
<View style={{ alignItems: 'center' }}>
<Button
title="Welcome"
containerStyle={{ marginVertical: 10 }}
/>
<Button
title="LOG IN"
buttonStyle={{
backgroundColor: 'black',
borderWidth: 2,
borderColor: 'white',
borderRadius: 40,
}}
containerStyle={{ marginVertical: 10, height: 50, width: 250 }}
titleStyle={{ fontWeight: 'bold' }}
/>
<Button
title="Log in"
loading={false}
loadingProps={{ size: 'small', color: 'white' }}
buttonStyle={{
backgroundColor: 'rgba(111, 202, 186, 1)',
borderRadius: 5,
}}
titleStyle={{ fontWeight: 'bold', fontSize: 23 }}
containerStyle={{ marginVertical: 10, height: 50, width: 230 }}
onPress={() => console.log('aye')}
underlayColor="transparent"
/>
<Button
title="Request an agent"
titleStyle={{ fontWeight: '500' }}
buttonStyle={{
backgroundColor: 'rgba(199, 43, 98, 1)',
borderColor: 'transparent',
borderWidth: 0,
}}
containerStyle={{ marginTop: 10, width: 275, height: 45 }}
/>
<Button
title="SIGN UP"
disabled
titleStyle={{ fontWeight: '700' }}
buttonStyle={{
backgroundColor: 'rgba(92, 99,216, 1)',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 5,
}}
containerStyle={{ marginTop: 20, width: 300, height: 45 }}
/>
<Button
title="SIGN UP"
loading
loadingProps={{ size: 'large', color: 'rgba(111, 202, 186, 1)' }}
titleStyle={{ fontWeight: '700' }}
buttonStyle={{
backgroundColor: 'rgba(92, 99,216, 1)',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 5,
paddingVertical: 10,
}}
containerStyle={{ marginTop: 20, width: 300, height: 45 }}
/>
<Button
title="Basic Button"
buttonStyle={{
backgroundColor: 'rgba(78, 116, 289, 1)',
borderRadius: 3,
}}
containerStyle={{ marginTop: 20 }}
/>
<Button
title="Outline Button"
buttonStyle={{
borderColor: 'rgba(78, 116, 289, 1)',
}}
type="outline"
titleStyle={{ color: 'rgba(78, 116, 289, 1)' }}
containerStyle={{ marginTop: 20 }}
/>
<Button
title="HOME"
loading
titleStyle={{ fontWeight: '700' }}
buttonStyle={{
backgroundColor: 'rgba(111, 202, 186, 1)',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 30,
paddingVertical: 10,
}}
containerStyle={{ marginTop: 20, width: 100, height: 40 }}
/>
<Button
title="Clear Button"
type="clear"
titleStyle={{ color: 'rgba(78, 116, 289, 1)' }}
containerStyle={{ marginTop: 20 }}
/>
<Button
title="Light"
buttonStyle={{
backgroundColor: 'rgba(244, 244, 244, 1)',
borderRadius: 3,
}}
containerStyle={{ marginTop: 20, height: 40 }}
titleStyle={{ marginHorizontal: 20, color: 'black' }}
/>
<Button
title="Dark"
buttonStyle={{ backgroundColor: 'rgba(39, 39, 39, 1)' }}
containerStyle={{ marginTop: 20, height: 40 }}
titleStyle={{ color: 'white', marginHorizontal: 20 }}
/>
<Button
title="Default"
containerStyle={{ marginTop: 20, height: 40 }}
buttonStyle={{ backgroundColor: 'rgba(78, 116, 289, 1)' }}
titleStyle={{ color: 'white', marginHorizontal: 20 }}
/>
<Button
title="Secondary"
buttonStyle={{ backgroundColor: 'rgba(127, 220, 103, 1)' }}
containerStyle={{ marginTop: 20, height: 40 }}
titleStyle={{ color: 'white', marginHorizontal: 20 }}
/>
<Button
title="Danger"
buttonStyle={{ backgroundColor: 'rgba(214, 61, 57, 1)' }}
containerStyle={{ marginTop: 20, height: 40 }}
titleStyle={{ color: 'white', marginHorizontal: 20 }}
/>
</View>
</ScrollView>
</View>
);
}
function actionMapping(dispatch) {
return {
pushTo: compose(dispatch, push),
};
}
function propsMapping({ theme }) {
return {
theme,
};
}
export default connect(propsMapping, actionMapping)(ButtonPage);
src/changeThemePage/index.js → src/pages/changeThemePage/index.js
View file @ 72a7b966
......@@ -15,13 +15,13 @@ import {
} from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { push, tab } from '../BasicNavigator/actions';
import themeType from '../theme';
import themeAction from '../theme/action';
import NavigationBar from '../components/NavigationBar';
import BackButton from '../components/BackButton';
import Button from '../components/ThemeButton';
import { NavigationEvents } from "react-navigation";
import { push, tab } from '../../BasicNavigator/actions';
import themeType from '../../theme';
import themeAction from '../../theme/action';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Button from '../../components/ThemeButton';
type Props = {};
const styles = StyleSheet.create({
......@@ -41,8 +41,7 @@ class ThemePage extends Component<Props> {
render() {
const { theme, setCurrentTheme } = this.props;
console.log('ThemePage:', this.props)
this.props.navigation.isFirstRouteInParent()
return (
<View style={styles.container}>
<NavigationBar
......@@ -70,12 +69,6 @@ class ThemePage extends Component<Props> {
}}
title="切换红色主题"
/>
<NavigationEvents
onWillFocus={payload => console.log('onWillFocus',payload)}
onDidFocus={() => console.log('onDidFocus')}
onWillBlur={payload => console.log('onWillBlur',payload)}
onDidBlur={payload => console.log('onDidBlur',payload)}
/>
</View>
);
}
......
src/jsComponent/JSPage.js → src/pages/home/FramePage.js
View file @ 72a7b966
/**
* Sample React Native App
* https://github.com/facebook/react-native
......@@ -8,69 +9,48 @@
import React, { Component } from 'react';
import {
Platform, StyleSheet, Text, View, TouchableOpacity,
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native';
import { NavigationEvents, withNavigationFocus } from 'react-navigation';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { push,tab } from '../BasicNavigator/actions';
import NavigationBar from '../components/NavigationBar';
import BackButton from '../components/BackButton';
import { compose } from 'redux';
import { push } from '../../BasicNavigator/actions';
type Props = {};
function JSPage(props) {
console.log('JSPage_props:', props)
//console.log('JSPage props from lastPage', this.props.navigation.state);
return (
<View style={styles.container}>
<NavigationBar
left={<BackButton />}
title="ThemeDemo"
/>
<TouchableOpacity onPress={() => { props.push('NativePage',{may: '22'}); }}>
<Text style={styles.instructions}>JSPage</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => { props.tab('ServicePage'); }}>
<Text style={styles.instructions}>Tab切换</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
function propsMapping(props) {
const { nav } = props;
return {
nav,
};
class NativeComponentList extends Component<Props> {
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => { this.props.push('JSPage', {test:1}); }}>
<Text style={styles.instructions}>NativeComponentList</Text>
</TouchableOpacity>
</View>
);
}
}
function actionMapping(dispatch) {
return {
push: compose(dispatch, push),
tab: compose(dispatch, tab),
};
}
//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch))
export default connect(propsMapping, actionMapping)(JSPage);
export default connect(null, actionMapping)(NativeComponentList);
src/home/JSComponentList.js → src/pages/home/JSComponentList.js
View file @ 72a7b966
......@@ -15,7 +15,7 @@ import {
} from 'react-native';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { push } from '../BasicNavigator/actions';
import { push } from '../../BasicNavigator/actions';
type Props = {};
......
src/pages/home/NativeComponentList.js 0 → 100644
View file @ 72a7b966
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { LargeList } from 'react-native-largelist-v3';
import {
Text,
View,
TouchableOpacity,
} from 'react-native';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
const data = [
{
items: [
{ name: 'navigation跳转', page: 'JSPage' },
{ name: '设置主题', page: 'ThemePage' },
{ name: '粘性头', page: 'SectionList' },
{ name: '瀑布流', page: 'WaterList' },
{ name: 'button', page: 'ButtonPage' },
],
},
];
type
Props = {
theme: Object,
pushTo: ()=> void
};
class FramePage extends Component<Props> {
renderIndexPath = ({ section, row }) => {
const { theme, pushTo } = this.props;
const item = data[section].items[row];
return (
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity
onPress={() => pushTo(item.page)}
>
<Text style={theme.titleText}>
{item.name}
</Text>
</TouchableOpacity>
</View>
);
};
render() {
const { theme } = this.props;
return (
<View style={theme.container}>
<NavigationBar
title="组件列表"
/>
<LargeList
style={[
theme.largeList,
{ height: global.SCREEN_HEIGHT },
]}
data={data}
heightForIndexPath={() => 50}
renderIndexPath={this.renderIndexPath}
/>
</View>
);
}
}
function actionMapping(dispatch) {
return {
pushTo: compose(dispatch, push),
};
}
function propsMapping({ theme }) {
return {
theme,
};
}
export default connect(propsMapping, actionMapping)(FramePage);
src/pages/navigationDemo/JSPage.js 0 → 100644
View file @ 72a7b966
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React from 'react';
import {
Text,
View,
} from 'react-native';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { push, tab } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Button from '../../components/ThemeButton';
import Styles from '../../theme/Styles';
type Props = {
pushTo: ()=> void,
tabTo: ()=> void
};
function JSPage(props: Props) {
console.log('JSPage_props:', props);
//console.log('JSPage props from lastPage', this.props.navigation.state);
return (
<View style={Styles.container}>
<NavigationBar
left={<BackButton />}
title="ThemeDemo"
/>
<View style={[Styles.container, { justifyContent: 'center' }]}>
<Text style={Styles.instructions}>第一个页面</Text>
<Button
containerStyle={{ height: 40, margin: 10 }}
onPress={() => { props.pushTo('NativePage', { may: '22' }); }}
title="跳转第二个页"
/>
<Button
containerStyle={{ height: 40, margin: 10 }}
onPress={() => { props.tabTo('ServicePage'); }}
title="返回首页Tab切换"
/>
</View>
</View>
);
}
function propsMapping(props) {
const { nav } = props;
return {
nav,
};
}
function actionMapping(dispatch) {
return {
pushTo: compose(dispatch, push),
tabTo: compose(dispatch, tab),
};
}
//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch))
export default connect(propsMapping, actionMapping)(JSPage);
src/nativeComponent/NativePage.js → src/pages/navigationDemo/NativePage.js
View file @ 72a7b966
......@@ -8,59 +8,48 @@
import React, { Component } from 'react';
import {
Platform, StyleSheet, Text, View, TouchableOpacity,
StyleSheet,
Text,
View,
} from 'react-native';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { pop } from '../BasicNavigator/actions';
import NavigationBar from '../components/NavigationBar';
import BackButton from '../components/BackButton';
import { pop } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Button from '../../components/ThemeButton';
import Styles from '../../theme/Styles';
type Props = {
routes: Array,
pop: () => void
popTo: () => void
};
class NativePage extends Component<Props> {
render() {
//console.log('NativePage props from lastPage', this.props.navigation.state);
return (
<View style={styles.container}>
<View style={Styles.container}>
<NavigationBar
left={<BackButton />}
title="ThemeDemo"
/>
<Text style={styles.instructions}>NativePage</Text>
<TouchableOpacity onPress={() => {
console.log('onPress', this.props);
const { routes } = this.props
this.props.pop('TabPage');
}}
>
<Text style={styles.instructions}>回首页</Text>
</TouchableOpacity>
<View style={[Styles.container, { justifyContent: 'center' }]}>
<Text style={Styles.instructions}>第二个页面</Text>
<Button
containerStyle={{ height: 40, margin: 10 }}
onPress={() => {
console.log('onPress', this.props);
this.props.popTo('TabPage');
}}
title="返回首页"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
function propsMapping(props) {
const { nav } = props;
return {
......@@ -69,7 +58,7 @@ function propsMapping(props) {
}
function actionMapping(dispatch) {
return {
pop: compose(dispatch, pop),
popTo: compose(dispatch, pop),
};
}
//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch))
......
src/home/FramePage.js → src/pages/sectionListDemo/index.js
View file @ 72a7b966
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
......@@ -11,77 +9,51 @@ import { connect } from 'react-redux';
import { compose } from 'redux';
import { LargeList } from 'react-native-largelist-v3';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import Button from '../components/ThemeButton';
import { push } from '../BasicNavigator/actions';
import NavigationBar from '../components/NavigationBar';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
import Styles from '../../theme/Styles';
type
Props = {};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
section: {
flex: 1,
backgroundColor: 'gray',
justifyContent: 'center',
alignItems: 'center',
},
row: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
line: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 1,
backgroundColor: '#EEE',
},
});
Props = {
theme: Object,
};
class FramePage extends Component<Props> {
_renderSection = (section: number) => (
<View style={styles.section}>
<Text>
class SectionListPage extends Component<Props> {
renderSection = (section: number) => {
return (
<View style={Styles.sectionBar}>
<Text>
Section
{' '}
{section}
</Text>
</View>
);
{' '}
{section}
</Text>
</View>
);
};
_renderIndexPath = ({ section, row }) => (
<View style={styles.row}>
<Text>
renderIndexPath = ({ section, row }) => {
return (
<View style={Styles.row}>
<Text>
Section
{' '}
{section}
{' '}
Row
{' '}
{row}
</Text>
<View style={styles.line} />
</View>
);
{' '}
{section}
{' '}
Row
{' '}
{row}
</Text>
<View style={Styles.line} />
</View>
);
};
render() {
const { theme } = this.props
const { theme } = this.props;
const data = [];
for (let section = 1; section <= 10; section += 1) {
const sContent = { items: [] };
......@@ -91,29 +63,27 @@ Row
data.push(sContent);
}
return (
<View style={theme.container}>
<View style={Styles.container}>
<NavigationBar
title="Frame"
/>
<Button
containerStyle={{ height: 40, margin: 10 }}
onPress={() => { this.props.push('ThemePage'); }}
title="Frame"
title="粘性头"
left={<BackButton />}
/>
<LargeList
style={{height:SCREEN_HEIGHT,backgroundColor:'yellow'}}
style={[
Styles.largeList,
{ height: global.SCREEN_HEIGHT },
]}
data={data}
heightForSection={() => 50}
renderSection={this._renderSection}
renderSection={this.renderSection}
heightForIndexPath={() => 50}
renderIndexPath={this._renderIndexPath}
renderIndexPath={this.renderIndexPath}
/>
</View>
);
}
}
function actionMapping(dispatch) {
return {
push: compose(dispatch, push),
......@@ -125,4 +95,4 @@ function propsMapping({ theme }) {
};
}
export default connect(propsMapping, actionMapping)(FramePage);
export default connect(propsMapping, actionMapping)(SectionListPage);
src/home/NativeComponentList.js → src/pages/waterListDemo/index.js
View file @ 72a7b966
/**
* Sample React Native App
* https://github.com/facebook/react-native
......@@ -15,8 +16,9 @@ import {
import { WaterfallList } from 'react-native-largelist-v3';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { push } from '../BasicNavigator/actions';
import NavigationBar from '../components/NavigationBar';
import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
const cookData = require('./data.json').data.list;
......@@ -33,7 +35,7 @@ const styles = StyleSheet.create({
},
});
class NativeComponentList extends Component<Props> {
class WaterList extends Component<Props> {
state = { data: [...cookData, ...cookData, ...cookData, ...cookData, ...cookData] };
_renderItem = item => <Image source={{ uri: item.showimg }} style={{ flex: 1, margin: 5 }} />;
......@@ -43,10 +45,11 @@ class NativeComponentList extends Component<Props> {
<View style={styles.container}>
<NavigationBar
title="NativeComponentList"
left={<BackButton />}
/>
<WaterfallList
data={this.state.data}
heightForItem={item => SCREEN_WIDTH / Math.floor(SCREEN_HEIGHT / 150)
heightForItem={item => global.SCREEN_WIDTH / Math.floor(global.SCREEN_HEIGHT / 150)
* +item.showimg_height / +item.showimg_width}
numColumns={2}
// preferColumnWidth={150}
......@@ -62,4 +65,4 @@ function actionMapping(dispatch) {
push: compose(dispatch, push),
};
}
export default connect(null, actionMapping)(NativeComponentList);
export default connect(null, actionMapping)(WaterList);
src/theme/Colors.js
View file @ 72a7b966
......@@ -8,12 +8,12 @@
* charcoal : string, text : string, eggplant : string, ricePaper : string}}
*/
const colors = {
background: '#F4F5F5',
background: '#F5FCFF',
clear: 'rgba(0,0,0,0)',
facebook: '#3b5998',
transparent: 'rgba(0,0,0,0)',
silver: '#F7F7F7',
steel: '#CCCCCC',
line: '#CCCCCC',
error: 'rgba(200, 0, 0, 0.8)',
ricePaper: 'rgba(255,255,255, 0.75)',
frost: '#D8D8D8',
......@@ -30,7 +30,8 @@ const colors = {
eggplant: '#251a34',
border: '#483F53',
banner: '#5F3E63',
text: '#E0D7E5',
//text: '#E0D7E5',
text: '#333',
};
export default colors;
src/theme/Metrics.js
View file @ 72a7b966
import {Dimensions, Platform} from 'react-native';
const { width, height } = Dimensions.get('window')
/**
* @flow
*/
// Used via Metrics.baseMargin
const metrics = {
marginHorizontal: 10,
marginVertical: 10,
section: 25,
baseMargin: 10,
doubleBaseMargin: 20,
smallMargin: 5,
doubleSection: 50,
horizontalLineHeight: 1,
screenWidth: width < height ? width : height,
screenHeight: width < height ? height : width,
navBarHeight: (Platform.OS === 'ios') ? 64 : 54,
buttonRadius: 4,
buttonHeight: 40,
buttonRadius: 16,
icons: {
tiny: 15,
small: 20,
......@@ -29,6 +24,6 @@ const metrics = {
large: 60,
logo: 200,
},
}
};
export default metrics
export default metrics;
src/theme/ApplicationStyles.js → src/theme/Styles.js
View file @ 72a7b966
/**
* @flow
*/
import { StyleSheet } from 'react-native';
import Fonts from './Fonts';
import Metrics from './Metrics';
import Colors from './Colors';
const ApplicationStyles = {
screen: {
mainContainer: {
flex: 1,
backgroundColor: Colors.transparent,
},
backgroundImage: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
container: {
flex: 1,
//paddingTop: Metrics.baseMargin,
backgroundColor: Colors.background,
},
section: {
margin: Metrics.section,
padding: Metrics.baseMargin,
},
sectionText: {
...Fonts.style.normal,
paddingVertical: Metrics.doubleBaseMargin,
color: Colors.snow,
marginVertical: Metrics.smallMargin,
textAlign: 'center',
},
subtitle: {
color: Colors.snow,
padding: Metrics.smallMargin,
marginBottom: Metrics.smallMargin,
marginHorizontal: Metrics.smallMargin,
},
titleText: {
...Fonts.style.h2,
fontSize: 14,
color: Colors.text,
},
const Styles = {
backgroundImage: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
darkLabelContainer: {
padding: Metrics.smallMargin,
paddingBottom: Metrics.doubleBaseMargin,
borderBottomColor: Colors.border,
borderBottomWidth: 1,
marginBottom: Metrics.baseMargin,
/**
* 页面容器
*/
container: {
flex: 1,
//paddingTop: Metrics.baseMargin,
backgroundColor: Colors.background,
},
/**
* 全屏长列表
*/
largeList: {
backgroundColor: Colors.snow,
},
sectionText: {
...Fonts.style.normal,
paddingVertical: Metrics.doubleBaseMargin,
color: Colors.snow,
marginVertical: Metrics.smallMargin,
textAlign: 'center',
},
darkLabel: {
fontFamily: Fonts.type.bold,
subtitle: {
color: Colors.snow,
padding: Metrics.smallMargin,
marginBottom: Metrics.smallMargin,
marginHorizontal: Metrics.smallMargin,
},
titleText: {
...Fonts.style.h2,
fontSize: 14,
color: Colors.panther,
},
/**
* 粘性头
*/
sectionBar: {
flex: 1,
backgroundColor: Colors.bloodOrange,
justifyContent: 'center',
alignItems: 'center',
},
/**
* 长列表项
*/
row: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
/**
* 分割线
*/
line: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 1,
backgroundColor: Colors.line,
},
groupContainer: {
margin: Metrics.smallMargin,
......@@ -75,6 +93,11 @@ const ApplicationStyles = {
alignItems: 'center',
textAlign: 'center',
},
}
instructions: {
textAlign: 'center',
color: Colors.text,
marginBottom: 5,
},
};
export default ApplicationStyles
export default StyleSheet.create(Styles);
src/theme/black/index.js
View file @ 72a7b966
......@@ -5,10 +5,12 @@ import Colors from '../Colors';
import Fonts from '../Fonts';
import Metrics from '../Metrics';
import Images from '../Images';
import ApplicationStyles from '../ApplicationStyles';
import Styles from '../Styles';
const ThemeColor = Colors.panther
const ThemeEndColor = Colors.panther;
const themeColor = Colors.panther
export default {
Colors, Fonts, Images, Metrics, ApplicationStyles, themeColor,
Colors, ...Metrics, ThemeColor, ThemeEndColor,
};
src/theme/default/index.js
View file @ 72a7b966
......@@ -5,11 +5,12 @@ import Colors from '../Colors';
import Fonts from '../Fonts';
import Metrics from '../Metrics';
import Images from '../Images';
import ApplicationStyles from '../ApplicationStyles';
import Styles from '../Styles';
const ThemeColor = '#0091FF';
const ThemeEndColor = '#00C7FD';
const themeColor = '#0091FF';
const navEndColor = '#00C7FD';
export default {
Colors, Fonts, Images, Metrics, ApplicationStyles, themeColor, navEndColor,
Colors, ...Metrics, ThemeColor, ThemeEndColor,
};
src/theme/red/index.js
View file @ 72a7b966
......@@ -5,11 +5,11 @@ import Colors from '../Colors';
import Fonts from '../Fonts';
import Metrics from '../Metrics';
import Images from '../Images';
import ApplicationStyles from '../ApplicationStyles';
import Styles from '../Styles';
const themeColor = '#F52F52';
const navEndColor = '#F65542';
const ThemeColor = '#F52F52';
const ThemeEndColor = '#FF8145';
export default {
Colors, Fonts, Images, Metrics, ApplicationStyles, themeColor, navEndColor,
Colors, ...Metrics, ThemeColor, ThemeEndColor,
};
src/utils/ApiConfig.js
View file @ 72a7b966
///**
// * @flow
// * Created by Rabbit on 2018/8/13.
// * Created by shiyunjie on 2018/8/13.
// */
//import { System } from './index';
//
......
src/utils/FontSize.js
View file @ 72a7b966
/**
* @flow
* Created by Rabbit on 2018/8/6.
* Created by shiyunjie on 2018/8/6.
*/
import { PixelRatio, Dimensions } from 'react-native';
......
src/utils/Global.js
View file @ 72a7b966
/**@flow
* Created by Rabbit on 2018/8/6.
* Created by shiyunjie on 2018/8/6.
*/
import { Dimensions, PixelRatio, Platform } from 'react-native';
import { FontSize } from './FontSize';
import { Px2Dp } from './Tool';
import theme from '../theme';
import defaultTheme from "../theme/default";
//import { ApiConfig } from './ApiConfig';
const { height, width } = Dimensions.get('window');
// 系统是iOS
global.iOS = Platform.OS === 'ios';
// 系统是安卓
......@@ -30,6 +28,6 @@ global.FONT_SIZE = FontSize;
global.px2dp = Px2Dp;
// ApiConfig
//global.ApiConfig = ApiConfig;
global.theme = theme.defaultTheme
global.theme = theme.defaultTheme;
// global.Config = Config;
//global.isIPhoneX = Theme.isIPhoneX;
src/utils/Tool.js
View file @ 72a7b966
/**
* @flow
* Created by Rabbit on 2018/7/11.
* Created by shiyunjie on 2018/7/11.
*/
......
src/utils/constants.js
View file @ 72a7b966
......@@ -4,9 +4,8 @@
import React from 'react';
export type ENV_TYPE = 'DEV' | 'FT' | 'SIT' | 'UAT' | 'PRO'
export type ENV_TYPE = 'SIT' | 'UAT' | 'PRO'
//export const ENV = 'DEV' // 预留的DEV,地址和SIT相同
export const ENV = 'SIT'
//export const ENV = 'UAT'
//export const ENV = 'PRO'
......@@ -19,24 +18,18 @@ export const RootPageInitialName = 'HomePage'
export const ppkVersion = '1'
export const baseCoreURLMapping = {
DEV: 'http://58.49.129.4/sit',
SIT: 'http://58.49.129.4/sit',
UAT: 'http://58.49.129.4',
PRO: 'https://ecustomer.cntaiping.com',
}
export const htmlURLMapping = {
DEV: 'http://smarket.tp95589.com',
SIT: 'http://smarket.tp95589.com',
UAT: 'http://smarket.tp95589.com',
PRO: 'http://mall.itaiping.com',
}
export const staticResourceMapping = {
DEV: 'http://58.49.129.4/sit',
SIT: 'http://58.49.129.4/sit',
UAT: 'http://58.49.129.4',
PRO: 'https://ecustomer.cntaiping.com',
......@@ -44,15 +37,12 @@ export const staticResourceMapping = {
export const resourceURLMapping = {
DEV: `${staticResourceMapping.DEV}/static/rn/src/img/`,
SIT: `${staticResourceMapping.UAT}/static/rn/src/img/`,
UAT: `${staticResourceMapping.UAT}/static/rn/src/img/`,
PRO: `${staticResourceMapping.PRO}/static/rn/src/img/`,
}
export const wxUserNameMapping = {
DEV: 'gh_b0cac2def4b1',
SIT: 'gh_b0cac2def4b1',
UAT: 'gh_b0cac2def4b1',
PRO: 'gh_104e2261b2fc',
......
yarn.lock
View file @ 72a7b966
......@@ -6298,6 +6298,11 @@ react-native-elements@^1.1.0:
react-native-ratings "^6.3.0"
react-native-status-bar-height "^2.2.0"
react-native-fast-image@^6.0.3:
version "6.0.3"
resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-6.0.3.tgz#e644076c5e21dd8695db07905779352b2b9c1cb8"
integrity sha512-49OdbWV0XD2mb5VTdLRJCQ9qpMgGdliRwHSue/aJxgLLLmDK6dmFIJ/LvEn0F9e5Je16K++5lS6yJAACvvxAfw==
react-native-gesture-handler@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.1.0.tgz#2a7d545ad2e0ca23adce22b2af441ad360ecccee"
......
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