Skip to content

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

样式修改，组件列表

parent 701fd579
Show whitespace changes
Inline Side-by-side
Showing with 560 additions and 244 deletions
package.json
View file @ 72a7b966
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"react-native": "0.59.5", "react-native": "0.59.5",
"react-native-device-info": "^2.1.1", "react-native-device-info": "^2.1.1",
"react-native-elements": "^1.1.0", "react-native-elements": "^1.1.0",
"react-native-fast-image": "^6.0.3",
"react-native-gesture-handler": "^1.1.0", "react-native-gesture-handler": "^1.1.0",
"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",
......
src/BasicNavigator/navigationStack.js
View file @ 72a7b966
...@@ -6,12 +6,15 @@ import { ...@@ -6,12 +6,15 @@ import {
createStackNavigator, createStackNavigator,
createAppContainer, createAppContainer,
} from 'react-navigation'; } from 'react-navigation';
import JSPage from '../jsComponent/JSPage'; import JSPage from '../pages/navigationDemo/JSPage';
import FramePage from '../home/FramePage'; import FramePage from '../pages/home/FramePage';
import ThemePage from '../changeThemePage'; import ThemePage from '../pages/changeThemePage';
import NativeComponentList from '../home/NativeComponentList'; import NativeComponentList from '../pages/home/NativeComponentList';
import JSComponentList from '../home/JSComponentList'; import JSComponentList from '../pages/home/JSComponentList';
import NativePage from '../nativeComponent/NativePage'; 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 { initialRouteName, RootPageInitialName } from '../utils/constants';
import { TabOptions } from '../components/TabOptions'; import { TabOptions } from '../components/TabOptions';
...@@ -81,6 +84,15 @@ const navigator = createStackNavigator({ ...@@ -81,6 +84,15 @@ const navigator = createStackNavigator({
ThemePage: { ThemePage: {
screen: ThemePage, screen: ThemePage,
}, },
SectionList: {
screen: SectionListDemo,
},
ButtonPage: {
screen: ButtonPage,
},
WaterList: {
screen: WaterList,
},
}, { }, {
initialRouteName, initialRouteName,
headerMode: 'none', headerMode: 'none',
......
src/components/NavigationBar/index.js
View file @ 72a7b966
...@@ -79,14 +79,14 @@ function NavigationBar(props: NavBarPropsType) { ...@@ -79,14 +79,14 @@ function NavigationBar(props: NavBarPropsType) {
const { const {
style, titleStyle, left, onPress, textStyle, fontStyle, title, right, theme, style, titleStyle, left, onPress, textStyle, fontStyle, title, right, theme,
} = props; } = props;
if (theme.navEndColor) { if (theme.ThemeEndColor) {
return ( return (
<LinearGradient <LinearGradient
start={{ x: 0.0, y: 0.25 }} start={{ x: 0.0, y: 0.25 }}
end={{ x: 0.5, y: 1.0 }} end={{ x: 0.5, y: 1.0 }}
locations={[0, 1]} locations={[0, 1]}
colors={[theme.themeColor, theme.navEndColor]} colors={[theme.ThemeColor, theme.ThemeEndColor]}
style={[styles.navBarContainer, { backgroundColor: theme.themeColor }, style]} style={[styles.navBarContainer, { backgroundColor: theme.ThemeColor }, style]}
> >
<View style={[styles.left, titleStyle]}>{left}</View> <View style={[styles.left, titleStyle]}>{left}</View>
<TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}> <TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}>
...@@ -97,7 +97,7 @@ function NavigationBar(props: NavBarPropsType) { ...@@ -97,7 +97,7 @@ function NavigationBar(props: NavBarPropsType) {
); );
} }
return ( return (
<View style={[styles.navBarContainer, { backgroundColor: theme.themeColor }, style]}> <View style={[styles.navBarContainer, { backgroundColor: theme.ThemeColor }, style]}>
<View style={[styles.left, titleStyle]}>{left}</View> <View style={[styles.left, titleStyle]}>{left}</View>
<TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}> <TouchableOpacity style={styles.navStyle} activeOpacity={1} onLongPress={onPress}>
<Text style={[styles.title, textStyle, fontStyle]}>{title}</Text> <Text style={[styles.title, textStyle, fontStyle]}>{title}</Text>
......
src/components/TabOptions/TabButton.js
View file @ 72a7b966
/** /**
* @flow * @flow
* Created by Rabbit on 2019-04-30. * Created by shiyunjie on 2019-04-30.
*/ */
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
...@@ -13,7 +13,7 @@ type Props = {} ...@@ -13,7 +13,7 @@ type Props = {}
class TabButton extends Component<Props> { class TabButton extends Component<Props> {
render() { render() {
const { theme, iconSuite, tabBarIconName, tabBarTitle, focused } = this.props 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 ( return (
<View style={{ alignItems: 'center' }}> <View style={{ alignItems: 'center' }}>
<Index <Index
......
src/components/TabOptions/index.js
View file @ 72a7b966
/** /**
* @flow * @flow
* Created by Rabbit on 2019-04-30. * Created by shiyunjie on 2019-04-30.
*/ */
import React from 'react'; import React from 'react';
......
src/components/ThemeButton/index.js
View file @ 72a7b966
/** /**
* @flow * @flow
* Created by Rabbit on 2019-04-30. * Created by shiyunjie on 2019-04-30.
*/ */
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Button } from 'react-native-elements'; import { Button } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient'; import LinearGradient from 'react-native-linear-gradient';
function ThemeButton(props) { type Props = {
theme: Object,
buttonStyle: Object,
}
function ThemeButton(props: Props) {
const { theme, buttonStyle } = props; const { theme, buttonStyle } = props;
if (theme.navEndColor) { if (buttonStyle && buttonStyle.backgroundColor) {
return ( return (
<Button <Button
{...props} {...props}
ViewComponent={LinearGradient} // Don't forget this! buttonStyle={[{ backgroundColor: theme.ThemeColor }, buttonStyle]}
buttonStyle={[buttonStyle, { backgroundColor: theme.themeColor }]}
linearGradientProps={{
colors: [theme.themeColor, theme.navEndColor],
start: { x: 0, y: 0.5 },
end: { x: 1, y: 0.5 },
}}
/> />
); );
} }
return ( return (
<Button <Button
{...props} {...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 { ...@@ -15,13 +15,13 @@ import {
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { compose } from 'redux'; import { compose } from 'redux';
import { push, tab } from '../BasicNavigator/actions'; import { push, tab } from '../../BasicNavigator/actions';
import themeType from '../theme'; import themeType from '../../theme';
import themeAction from '../theme/action'; import themeAction from '../../theme/action';
import NavigationBar from '../components/NavigationBar'; import NavigationBar from '../../components/NavigationBar';
import BackButton from '../components/BackButton'; import BackButton from '../../components/BackButton';
import Button from '../components/ThemeButton'; import Button from '../../components/ThemeButton';
import { NavigationEvents } from "react-navigation";
type Props = {}; type Props = {};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
...@@ -41,8 +41,7 @@ class ThemePage extends Component<Props> { ...@@ -41,8 +41,7 @@ class ThemePage extends Component<Props> {
render() { render() {
const { theme, setCurrentTheme } = this.props; const { theme, setCurrentTheme } = this.props;
console.log('ThemePage:', this.props)
this.props.navigation.isFirstRouteInParent()
return ( return (
<View style={styles.container}> <View style={styles.container}>
<NavigationBar <NavigationBar
...@@ -70,12 +69,6 @@ class ThemePage extends Component<Props> { ...@@ -70,12 +69,6 @@ class ThemePage extends Component<Props> {
}} }}
title="切换红色主题" 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> </View>
); );
} }
......
src/jsComponent/JSPage.js → src/pages/home/FramePage.js
View file @ 72a7b966
/** /**
* Sample React Native App * Sample React Native App
* https://github.com/facebook/react-native * https://github.com/facebook/react-native
...@@ -8,69 +9,48 @@ ...@@ -8,69 +9,48 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { import {
Platform, StyleSheet, Text, View, TouchableOpacity, StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native'; } from 'react-native';
import { NavigationEvents, withNavigationFocus } from 'react-navigation';
import { compose } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { push,tab } from '../BasicNavigator/actions'; import { compose } from 'redux';
import NavigationBar from '../components/NavigationBar'; import { push } from '../../BasicNavigator/actions';
import BackButton from '../components/BackButton';
type Props = {}; 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({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF', backgroundColor: '#F5FCFF',
}, },
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: { instructions: {
textAlign: 'center', textAlign: 'center',
color: '#333333', color: '#333333',
marginBottom: 5, marginBottom: 5,
}, },
}); });
function propsMapping(props) {
const { nav } = props; class NativeComponentList extends Component<Props> {
return { render() {
nav, return (
}; <View style={styles.container}>
<TouchableOpacity onPress={() => { this.props.push('JSPage', {test:1}); }}>
<Text style={styles.instructions}>NativeComponentList</Text>
</TouchableOpacity>
</View>
);
}
} }
function actionMapping(dispatch) { function actionMapping(dispatch) {
return { return {
push: compose(dispatch, push), 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 { ...@@ -15,7 +15,7 @@ import {
} from 'react-native'; } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { compose } from 'redux'; import { compose } from 'redux';
import { push } from '../BasicNavigator/actions'; import { push } from '../../BasicNavigator/actions';
type Props = {}; 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 @@ ...@@ -8,59 +8,48 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { import {
Platform, StyleSheet, Text, View, TouchableOpacity, StyleSheet,
Text,
View,
} from 'react-native'; } from 'react-native';
import { compose } from 'redux'; import { compose } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { pop } from '../BasicNavigator/actions'; import { pop } from '../../BasicNavigator/actions';
import NavigationBar from '../components/NavigationBar'; import NavigationBar from '../../components/NavigationBar';
import BackButton from '../components/BackButton'; import BackButton from '../../components/BackButton';
import Button from '../../components/ThemeButton';
import Styles from '../../theme/Styles';
type Props = { type Props = {
routes: Array, routes: Array,
pop: () => void popTo: () => void
}; };
class NativePage extends Component<Props> { class NativePage extends Component<Props> {
render() { render() {
//console.log('NativePage props from lastPage', this.props.navigation.state); //console.log('NativePage props from lastPage', this.props.navigation.state);
return ( return (
<View style={styles.container}> <View style={Styles.container}>
<NavigationBar <NavigationBar
left={<BackButton />} left={<BackButton />}
title="ThemeDemo" title="ThemeDemo"
/> />
<Text style={styles.instructions}>NativePage</Text> <View style={[Styles.container, { justifyContent: 'center' }]}>
<Text style={Styles.instructions}>第二个页面</Text>
<TouchableOpacity onPress={() => { <Button
containerStyle={{ height: 40, margin: 10 }}
onPress={() => {
console.log('onPress', this.props); console.log('onPress', this.props);
const { routes } = this.props this.props.popTo('TabPage');
this.props.pop('TabPage');
}} }}
> title="返回首页"
<Text style={styles.instructions}>回首页</Text> />
</TouchableOpacity> </View>
</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) { function propsMapping(props) {
const { nav } = props; const { nav } = props;
return { return {
...@@ -69,7 +58,7 @@ function propsMapping(props) { ...@@ -69,7 +58,7 @@ function propsMapping(props) {
} }
function actionMapping(dispatch) { function actionMapping(dispatch) {
return { return {
pop: compose(dispatch, pop), popTo: compose(dispatch, pop),
}; };
} }
//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch)) //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 * @format
* @flow * @flow
...@@ -11,52 +9,23 @@ import { connect } from 'react-redux'; ...@@ -11,52 +9,23 @@ import { connect } from 'react-redux';
import { compose } from 'redux'; import { compose } from 'redux';
import { LargeList } from 'react-native-largelist-v3'; import { LargeList } from 'react-native-largelist-v3';
import { import {
StyleSheet,
Text, Text,
View, View,
} from 'react-native'; } from 'react-native';
import Button from '../components/ThemeButton'; 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 Styles from '../../theme/Styles';
type type
Props = {}; Props = {
theme: Object,
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',
},
});
class FramePage extends Component<Props> { class SectionListPage extends Component<Props> {
_renderSection = (section: number) => ( renderSection = (section: number) => {
<View style={styles.section}> return (
<View style={Styles.sectionBar}>
<Text> <Text>
Section Section
{' '} {' '}
...@@ -64,24 +33,27 @@ class FramePage extends Component<Props> { ...@@ -64,24 +33,27 @@ class FramePage extends Component<Props> {
</Text> </Text>
</View> </View>
); );
};
_renderIndexPath = ({ section, row }) => ( renderIndexPath = ({ section, row }) => {
<View style={styles.row}> return (
<View style={Styles.row}>
<Text> <Text>
Section Section
{' '} {' '}
{section} {section}
{' '} {' '}
Row Row
{' '} {' '}
{row} {row}
</Text> </Text>
<View style={styles.line} /> <View style={Styles.line} />
</View> </View>
); );
};
render() { render() {
const { theme } = this.props const { theme } = this.props;
const data = []; const data = [];
for (let section = 1; section <= 10; section += 1) { for (let section = 1; section <= 10; section += 1) {
const sContent = { items: [] }; const sContent = { items: [] };
...@@ -91,29 +63,27 @@ Row ...@@ -91,29 +63,27 @@ Row
data.push(sContent); data.push(sContent);
} }
return ( return (
<View style={theme.container}> <View style={Styles.container}>
<NavigationBar <NavigationBar
title="Frame" title="粘性头"
/> left={<BackButton />}
<Button
containerStyle={{ height: 40, margin: 10 }}
onPress={() => { this.props.push('ThemePage'); }}
title="Frame"
/> />
<LargeList <LargeList
style={{height:SCREEN_HEIGHT,backgroundColor:'yellow'}} style={[
Styles.largeList,
{ height: global.SCREEN_HEIGHT },
]}
data={data} data={data}
heightForSection={() => 50} heightForSection={() => 50}
renderSection={this._renderSection} renderSection={this.renderSection}
heightForIndexPath={() => 50} heightForIndexPath={() => 50}
renderIndexPath={this._renderIndexPath} renderIndexPath={this.renderIndexPath}
/> />
</View> </View>
); );
} }
} }
function actionMapping(dispatch) { function actionMapping(dispatch) {
return { return {
push: compose(dispatch, push), push: compose(dispatch, push),
...@@ -125,4 +95,4 @@ function propsMapping({ theme }) { ...@@ -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 * Sample React Native App
* https://github.com/facebook/react-native * https://github.com/facebook/react-native
...@@ -15,8 +16,9 @@ import { ...@@ -15,8 +16,9 @@ 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 { push } from '../BasicNavigator/actions'; import { push } from '../../BasicNavigator/actions';
import NavigationBar from '../components/NavigationBar'; import NavigationBar from '../../components/NavigationBar';
import BackButton from '../../components/BackButton';
const cookData = require('./data.json').data.list; const cookData = require('./data.json').data.list;
...@@ -33,7 +35,7 @@ const styles = StyleSheet.create({ ...@@ -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] }; state = { data: [...cookData, ...cookData, ...cookData, ...cookData, ...cookData] };
_renderItem = item => <Image source={{ uri: item.showimg }} style={{ flex: 1, margin: 5 }} />; _renderItem = item => <Image source={{ uri: item.showimg }} style={{ flex: 1, margin: 5 }} />;
...@@ -43,10 +45,11 @@ class NativeComponentList extends Component<Props> { ...@@ -43,10 +45,11 @@ class NativeComponentList extends Component<Props> {
<View style={styles.container}> <View style={styles.container}>
<NavigationBar <NavigationBar
title="NativeComponentList" title="NativeComponentList"
left={<BackButton />}
/> />
<WaterfallList <WaterfallList
data={this.state.data} 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} * +item.showimg_height / +item.showimg_width}
numColumns={2} numColumns={2}
// preferColumnWidth={150} // preferColumnWidth={150}
...@@ -62,4 +65,4 @@ function actionMapping(dispatch) { ...@@ -62,4 +65,4 @@ function actionMapping(dispatch) {
push: compose(dispatch, push), 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 @@ ...@@ -8,12 +8,12 @@
* charcoal : string, text : string, eggplant : string, ricePaper : string}} * charcoal : string, text : string, eggplant : string, ricePaper : string}}
*/ */
const colors = { const colors = {
background: '#F4F5F5', background: '#F5FCFF',
clear: 'rgba(0,0,0,0)', clear: 'rgba(0,0,0,0)',
facebook: '#3b5998', facebook: '#3b5998',
transparent: 'rgba(0,0,0,0)', transparent: 'rgba(0,0,0,0)',
silver: '#F7F7F7', silver: '#F7F7F7',
steel: '#CCCCCC', line: '#CCCCCC',
error: 'rgba(200, 0, 0, 0.8)', error: 'rgba(200, 0, 0, 0.8)',
ricePaper: 'rgba(255,255,255, 0.75)', ricePaper: 'rgba(255,255,255, 0.75)',
frost: '#D8D8D8', frost: '#D8D8D8',
...@@ -30,7 +30,8 @@ const colors = { ...@@ -30,7 +30,8 @@ const colors = {
eggplant: '#251a34', eggplant: '#251a34',
border: '#483F53', border: '#483F53',
banner: '#5F3E63', banner: '#5F3E63',
text: '#E0D7E5', //text: '#E0D7E5',
text: '#333',
}; };
export default colors; export default colors;
src/theme/Metrics.js
View file @ 72a7b966
import {Dimensions, Platform} from 'react-native'; /**
* @flow
const { width, height } = Dimensions.get('window') */
// Used via Metrics.baseMargin // Used via Metrics.baseMargin
const metrics = { const metrics = {
marginHorizontal: 10,
marginVertical: 10,
section: 25,
baseMargin: 10, baseMargin: 10,
doubleBaseMargin: 20, doubleBaseMargin: 20,
smallMargin: 5, smallMargin: 5,
doubleSection: 50, doubleSection: 50,
horizontalLineHeight: 1, horizontalLineHeight: 1,
screenWidth: width < height ? width : height, buttonHeight: 40,
screenHeight: width < height ? height : width, buttonRadius: 16,
navBarHeight: (Platform.OS === 'ios') ? 64 : 54,
buttonRadius: 4,
icons: { icons: {
tiny: 15, tiny: 15,
small: 20, small: 20,
...@@ -29,6 +24,6 @@ const metrics = { ...@@ -29,6 +24,6 @@ const metrics = {
large: 60, large: 60,
logo: 200, logo: 200,
}, },
} };
export default metrics export default metrics;
src/theme/ApplicationStyles.js → src/theme/Styles.js
View file @ 72a7b966
/** /**
* @flow * @flow
*/ */
import { StyleSheet } from 'react-native';
import Fonts from './Fonts'; import Fonts from './Fonts';
import Metrics from './Metrics'; import Metrics from './Metrics';
import Colors from './Colors'; import Colors from './Colors';
const ApplicationStyles = {
screen: { const Styles = {
mainContainer: {
flex: 1,
backgroundColor: Colors.transparent,
},
backgroundImage: { backgroundImage: {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
...@@ -18,14 +15,19 @@ const ApplicationStyles = { ...@@ -18,14 +15,19 @@ const ApplicationStyles = {
bottom: 0, bottom: 0,
right: 0, right: 0,
}, },
/**
* 页面容器
*/
container: { container: {
flex: 1, flex: 1,
//paddingTop: Metrics.baseMargin, //paddingTop: Metrics.baseMargin,
backgroundColor: Colors.background, backgroundColor: Colors.background,
}, },
section: { /**
margin: Metrics.section, * 全屏长列表
padding: Metrics.baseMargin, */
largeList: {
backgroundColor: Colors.snow,
}, },
sectionText: { sectionText: {
...Fonts.style.normal, ...Fonts.style.normal,
...@@ -43,19 +45,35 @@ const ApplicationStyles = { ...@@ -43,19 +45,35 @@ const ApplicationStyles = {
titleText: { titleText: {
...Fonts.style.h2, ...Fonts.style.h2,
fontSize: 14, fontSize: 14,
color: Colors.text, color: Colors.panther,
}, },
/**
* 粘性头
*/
sectionBar: {
flex: 1,
backgroundColor: Colors.bloodOrange,
justifyContent: 'center',
alignItems: 'center',
}, },
darkLabelContainer: { /**
padding: Metrics.smallMargin, * 长列表项
paddingBottom: Metrics.doubleBaseMargin, */
borderBottomColor: Colors.border, row: {
borderBottomWidth: 1, flex: 1,
marginBottom: Metrics.baseMargin, justifyContent: 'center',
alignItems: 'center',
}, },
darkLabel: { /**
fontFamily: Fonts.type.bold, * 分割线
color: Colors.snow, */
line: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 1,
backgroundColor: Colors.line,
}, },
groupContainer: { groupContainer: {
margin: Metrics.smallMargin, margin: Metrics.smallMargin,
...@@ -75,6 +93,11 @@ const ApplicationStyles = { ...@@ -75,6 +93,11 @@ const ApplicationStyles = {
alignItems: 'center', alignItems: 'center',
textAlign: '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'; ...@@ -5,10 +5,12 @@ import Colors from '../Colors';
import Fonts from '../Fonts'; import Fonts from '../Fonts';
import Metrics from '../Metrics'; import Metrics from '../Metrics';
import Images from '../Images'; 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 { 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'; ...@@ -5,11 +5,12 @@ import Colors from '../Colors';
import Fonts from '../Fonts'; import Fonts from '../Fonts';
import Metrics from '../Metrics'; import Metrics from '../Metrics';
import Images from '../Images'; 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 { 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'; ...@@ -5,11 +5,11 @@ import Colors from '../Colors';
import Fonts from '../Fonts'; import Fonts from '../Fonts';
import Metrics from '../Metrics'; import Metrics from '../Metrics';
import Images from '../Images'; import Images from '../Images';
import ApplicationStyles from '../ApplicationStyles'; import Styles from '../Styles';
const themeColor = '#F52F52'; const ThemeColor = '#F52F52';
const navEndColor = '#F65542'; const ThemeEndColor = '#FF8145';
export default { export default {
Colors, Fonts, Images, Metrics, ApplicationStyles, themeColor, navEndColor, Colors, ...Metrics, ThemeColor, ThemeEndColor,
}; };
src/utils/ApiConfig.js
View file @ 72a7b966
///** ///**
// * @flow // * @flow
// * Created by Rabbit on 2018/8/13. // * Created by shiyunjie on 2018/8/13.
// */ // */
//import { System } from './index'; //import { System } from './index';
// //
......
src/utils/FontSize.js
View file @ 72a7b966
/** /**
* @flow * @flow
* Created by Rabbit on 2018/8/6. * Created by shiyunjie on 2018/8/6.
*/ */
import { PixelRatio, Dimensions } from 'react-native'; import { PixelRatio, Dimensions } from 'react-native';
......
src/utils/Global.js
View file @ 72a7b966
/**@flow /**@flow
* Created by Rabbit on 2018/8/6. * Created by shiyunjie on 2018/8/6.
*/ */
import { Dimensions, PixelRatio, Platform } from 'react-native'; import { Dimensions, PixelRatio, Platform } from 'react-native';
import { FontSize } from './FontSize'; import { FontSize } from './FontSize';
import { Px2Dp } from './Tool'; import { Px2Dp } from './Tool';
import theme from '../theme'; import theme from '../theme';
import defaultTheme from "../theme/default";
//import { ApiConfig } from './ApiConfig'; //import { ApiConfig } from './ApiConfig';
const { height, width } = Dimensions.get('window'); const { height, width } = Dimensions.get('window');
// 系统是iOS // 系统是iOS
global.iOS = Platform.OS === 'ios'; global.iOS = Platform.OS === 'ios';
// 系统是安卓 // 系统是安卓
...@@ -30,6 +28,6 @@ global.FONT_SIZE = FontSize; ...@@ -30,6 +28,6 @@ global.FONT_SIZE = FontSize;
global.px2dp = Px2Dp; global.px2dp = Px2Dp;
// ApiConfig // ApiConfig
//global.ApiConfig = ApiConfig; //global.ApiConfig = ApiConfig;
global.theme = theme.defaultTheme global.theme = theme.defaultTheme;
// global.Config = Config; // global.Config = Config;
//global.isIPhoneX = Theme.isIPhoneX; //global.isIPhoneX = Theme.isIPhoneX;
src/utils/Tool.js
View file @ 72a7b966
/** /**
* @flow * @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 @@ ...@@ -4,9 +4,8 @@
import React from 'react'; 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 = 'SIT'
//export const ENV = 'UAT' //export const ENV = 'UAT'
//export const ENV = 'PRO' //export const ENV = 'PRO'
...@@ -19,24 +18,18 @@ export const RootPageInitialName = 'HomePage' ...@@ -19,24 +18,18 @@ export const RootPageInitialName = 'HomePage'
export const ppkVersion = '1' export const ppkVersion = '1'
export const baseCoreURLMapping = { export const baseCoreURLMapping = {
DEV: 'http://58.49.129.4/sit',
SIT: 'http://58.49.129.4/sit', SIT: 'http://58.49.129.4/sit',
UAT: 'http://58.49.129.4', UAT: 'http://58.49.129.4',
PRO: 'https://ecustomer.cntaiping.com', PRO: 'https://ecustomer.cntaiping.com',
} }
export const htmlURLMapping = { export const htmlURLMapping = {
DEV: 'http://smarket.tp95589.com',
SIT: 'http://smarket.tp95589.com', SIT: 'http://smarket.tp95589.com',
UAT: 'http://smarket.tp95589.com', UAT: 'http://smarket.tp95589.com',
PRO: 'http://mall.itaiping.com', PRO: 'http://mall.itaiping.com',
} }
export const staticResourceMapping = { export const staticResourceMapping = {
DEV: 'http://58.49.129.4/sit',
SIT: 'http://58.49.129.4/sit', SIT: 'http://58.49.129.4/sit',
UAT: 'http://58.49.129.4', UAT: 'http://58.49.129.4',
PRO: 'https://ecustomer.cntaiping.com', PRO: 'https://ecustomer.cntaiping.com',
...@@ -44,15 +37,12 @@ export const staticResourceMapping = { ...@@ -44,15 +37,12 @@ export const staticResourceMapping = {
export const resourceURLMapping = { export const resourceURLMapping = {
DEV: `${staticResourceMapping.DEV}/static/rn/src/img/`,
SIT: `${staticResourceMapping.UAT}/static/rn/src/img/`, SIT: `${staticResourceMapping.UAT}/static/rn/src/img/`,
UAT: `${staticResourceMapping.UAT}/static/rn/src/img/`, UAT: `${staticResourceMapping.UAT}/static/rn/src/img/`,
PRO: `${staticResourceMapping.PRO}/static/rn/src/img/`, PRO: `${staticResourceMapping.PRO}/static/rn/src/img/`,
} }
export const wxUserNameMapping = { export const wxUserNameMapping = {
DEV: 'gh_b0cac2def4b1',
SIT: 'gh_b0cac2def4b1', SIT: 'gh_b0cac2def4b1',
UAT: 'gh_b0cac2def4b1', UAT: 'gh_b0cac2def4b1',
PRO: 'gh_104e2261b2fc', PRO: 'gh_104e2261b2fc',
......
yarn.lock
View file @ 72a7b966
...@@ -6298,6 +6298,11 @@ react-native-elements@^1.1.0: ...@@ -6298,6 +6298,11 @@ react-native-elements@^1.1.0:
react-native-ratings "^6.3.0" react-native-ratings "^6.3.0"
react-native-status-bar-height "^2.2.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: react-native-gesture-handler@^1.1.0:
version "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" 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