Skip to content

Commit

Permalink
Migrate from @uiw/react-native-template 0.1.2 to 1.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Apr 21, 2020
1 parent 20bf86e commit 1ada110
Show file tree
Hide file tree
Showing 20 changed files with 286 additions and 126 deletions.
12 changes: 12 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,18 @@ npx react-native init ProjectName --template ${TEMPLATE_NAME}
# but will use TEMPLATE_NAME custom template
npx react-native@${VERSION} init ProjectName --template ${TEMPLATE_NAME}
```

## Dependencies

```bash
@react-navigation/native
├──react-native-gesture-handler
├──react-native-reanimated
├──react-native-screens
├──react-native-safe-area-context
└──@react-native-community/masked-view
```

## Links

- [React Native upgrade helper](https://react-native-community.github.io/upgrade-helper/)
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@uiw/react-native-template",
"version": "0.1.2",
"version": "1.0.0",
"description": "React Native template for react-native-uiw.",
"scripts": {
"prepublishOnly": "npm --no-git-tag-version version $TRAVIS_TAG"
Expand Down
4 changes: 4 additions & 0 deletions template/mocker/user.mock.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,8 @@ module.exports = {
'POST /api/logout': {
message: 'Logout successful!',
},
'GET /api/auth': {
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9',
// token: '',
},
}
10 changes: 4 additions & 6 deletions template/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
"dependencies": {
"@react-native-community/async-storage": "1.9.0",
"@react-native-community/masked-view": "0.1.9",
"@react-navigation/bottom-tabs": "^5.2.7",
"@react-navigation/native": "^5.1.6",
"@react-navigation/stack": "^5.2.11",
"@rematch/core": "1.4.0",
"@rematch/loading": "1.2.1",
"@uiw/formatter": "1.2.4",
Expand All @@ -24,13 +27,8 @@
"react-native-gesture-handler": "1.6.1",
"react-native-reanimated": "1.8.0",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "2.4.0",
"react-native-screens": "2.5.0",
"react-native-svg": "12.1.0",
"react-native-tab-view": "2.14.0",
"react-navigation": "4.3.7",
"react-navigation-drawer": "2.4.11",
"react-navigation-stack": "2.3.12",
"react-navigation-tabs": "2.8.11",
"react-redux": "7.2.0",
"redux": "4.0.5"
},
Expand Down
43 changes: 30 additions & 13 deletions template/src/App.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,40 @@
import 'react-native-gesture-handler';
import React from 'react';
import { View, StatusBar, StyleSheet } from 'react-native';
import { StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider } from 'react-redux';
import { store } from './models';
import { Navigation } from './routes/nav';
import AuthLoadingScreen from './pages/AuthLoading';
import { stackPageData } from './routes'

const Stack = createStackNavigator();

export default () => {
let [theme] = React.useState('light');
return (
<Provider store={store}>
<View style={styles.warpper}>
<StatusBar barStyle="dark-content" />
<Navigation theme={theme} />
</View>
<StatusBar barStyle="light-content" />
<AuthLoadingScreen>
{(token) => (
<NavigationContainer>
<Stack.Navigator initialRouteName={!!token ? 'Home': 'SignIn'}>
{stackPageData.map((props, index) => {
return (
<Stack.Screen
key={index}
{...props}
// name="Home"
// options={{
// header: () => null
// }}
// component={Home}
/>
)
})}
</Stack.Navigator>
</NavigationContainer>
)}
</AuthLoadingScreen>
</Provider>
);
};

const styles = StyleSheet.create({
warpper: {
flex: 1,
},
});
32 changes: 30 additions & 2 deletions template/src/models/global.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@
import AsyncStorage from '@react-native-community/async-storage';
import { userAuth } from '../services/users';
import conf from '../config';

export default {
state: {
/**
* 验证是否登录
*/
authState: false,
token: null,
apihost: null,
},
reducers: {
update: (state, payload) => ({ ...state, ...payload }),
},
effects: {
},
effects: dispatch => ({
async authToken(_, { global }) {

let host = await AsyncStorage.getItem('apihost');
if (!host && conf.hosts[0]) {
await AsyncStorage.setItem('apihost', JSON.stringify(conf.hosts[0]));
await this.update({ apihost: conf.hosts[0] });
}

if (!global.token) {
await AsyncStorage.removeItem('userData');
await AsyncStorage.removeItem('token');
}

const data = await userAuth();
if (data && data.token) {
await this.update({ authState: true, token: data.token });
} else {
await this.update({ authState: true, token: null });
}
}
}),
};
3 changes: 2 additions & 1 deletion template/src/models/users.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export default {
await dispatch.global.update({ token: data.token });
await this.update({ userData: data.data });
if (Global.navigation) {
Global.navigation.navigate('App');
// Global.navigation.navigate('Home');
Global.navigation.replace('Home');
}
} else if (data && data.message) {
Alert.alert(`Login failed - ${data.error}`, data.message);
Expand Down
39 changes: 13 additions & 26 deletions template/src/pages/AuthLoading/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,23 @@ import React from 'react';
import { Text, StatusBar, StyleSheet, SafeAreaView } from 'react-native';
import { connect } from 'react-redux';
import { Flex, Loader, H3, Icon } from '@uiw/react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { sleep } from '../../utils';
import Global from '../../global';
import { logoLight } from '../../components/icons/signin';
import Footer from '../../components/Footer';
import conf from '../../config';

class AuthLoadingScreen extends React.Component {
componentDidMount() {
this._bootstrapAsync();
}
_bootstrapAsync = async () => {
const { navigation, updateState } = this.props;
const { navigation, authToken } = this.props;
if (navigation && Global) {
Global.navigation = navigation;
}

let host = await AsyncStorage.getItem('apihost');
if (!host && conf.hosts[0]) {
await AsyncStorage.setItem('apihost', JSON.stringify(conf.hosts[0]));
await updateState({ apihost: conf.hosts[0] });
}

let token = await AsyncStorage.getItem('token');

// Improve the user experience, not to flash, it looks like a splash screen
await sleep(600);
if (!token) {
await AsyncStorage.removeItem('userData');
await AsyncStorage.removeItem('token');
}
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
navigation.navigate(token ? 'App' : 'SignIn');
authToken();
}
render() {
const { token, loading, authState, children } = this.props;
if (children && typeof children === 'function' && authState) {
return children(token);
}
return (
<SafeAreaView style={styles.container}>
<Flex direction="column" justify="center" align="center" style={{ flex: 1 }}>
Expand All @@ -48,6 +29,7 @@ class AuthLoadingScreen extends React.Component {
</Flex>
<Flex style={{ height: 32, flex: 1, width: '100%' }}>
<Loader
loading={loading}
maskColor="transtion"
vertical
rounded={5}
Expand All @@ -64,9 +46,14 @@ class AuthLoadingScreen extends React.Component {
}

export default connect(
() => ({}),
({ global, loading }) => ({
token: global.token,
authState: global.authState,
loading: loading.effects.global.authToken,
}),
({ global }) => ({
updateState: global.update,
authToken: global.authToken,
}),
)(AuthLoadingScreen);

Expand Down
5 changes: 4 additions & 1 deletion template/src/pages/DevOptions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,10 @@ class DevOptions extends React.Component {
<StatusBar barStyle="light-content" />
<View style={{ flex: 1 }}>
<Flex justify="start" align="start">
<Button bordered={false} style={{ marginLeft: 15, marginBottom: 20 }} onPress={() => navigation.navigate('SignIn')}>
<Button
bordered={false}
style={{ marginLeft: 15, marginBottom: 20 }}
onPress={() => navigation.goBack()}>
<Icon fill="#fff" size={23} name="arrow-left" />
</Button>
</Flex>
Expand Down
35 changes: 16 additions & 19 deletions template/src/pages/Home/index.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@
import React from 'react';
import { connect } from 'react-redux';
import { View, Text } from 'react-native';
import { Button } from '@uiw/react-native';
import { StatusBar } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import homeTabData from '../../routes/homeTab';

const BottomTabs = createBottomTabNavigator();

class DashboardScreen extends React.Component {
render() {
const { loading } = this.props;
return (
<View>
<Text>This Home Page.</Text>
<Button loading={loading.logout} disabled={loading.logout} type="danger" onPress={this.props.logout}>
Logout
</Button>
</View>
<React.Fragment>
<StatusBar barStyle="dark-content" />
<BottomTabs.Navigator>
{homeTabData.map((props, idx) => {
return (
<BottomTabs.Screen key={idx} {...props} />
)
})}
</BottomTabs.Navigator>
</React.Fragment>
);
}
}

export default connect(
({ loading, users }) => ({
loading: loading.effects.users,
}),
({ users }) => ({
update: users.update,
logout: users.logout,
}),
)(DashboardScreen);
export default DashboardScreen;
14 changes: 14 additions & 0 deletions template/src/pages/MyHome/Setting/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React, { Component } from 'react';
import { View, Text, SafeAreaView } from 'react-native';

export default class MyScreen extends Component {
render() {
return (
<SafeAreaView>
<View>
<Text>设置</Text>
</View>
</SafeAreaView>
);
}
}
40 changes: 40 additions & 0 deletions template/src/pages/MyHome/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React, { Component } from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import { Button, List, Icon } from '@uiw/react-native';

export default class MyScreen extends Component {
render() {
const { navigation } = this.props;
return (
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<List
flat={true}
data={[
{ title: '企业开票' },
{ title: '我的熟车' },
{ title: '设置' },
{ title: '退出登录', onPress: () => navigation.replace('SignIn') },
]}
renderItem={({ item, index }) => {
return (
<List.Item
key={index}
extra={<Icon name="right" fill="#abb0b5" size={14} />}
size="large"
paddingLeft={15}
style={{ borderBottomWidth: 0, }}
onPress={item.onPress || null}
>
<View>
<Text>{item.title}</Text>
</View>
</List.Item>
)
}}
/>
</View>
</SafeAreaView>
);
}
}
14 changes: 14 additions & 0 deletions template/src/pages/OrderHome/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React, { Component } from 'react';
import { View, Text, SafeAreaView } from 'react-native';

export default class MyScreen extends Component {
render() {
return (
<SafeAreaView>
<View>
<Text>订单首页</Text>
</View>
</SafeAreaView>
);
}
}
14 changes: 14 additions & 0 deletions template/src/pages/TransportHome/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React, { Component } from 'react';
import { View, Text, SafeAreaView } from 'react-native';

export default class MyScreen extends Component {
render() {
return (
<SafeAreaView>
<View>
<Text>发货首页</Text>
</View>
</SafeAreaView>
);
}
}
Loading

0 comments on commit 1ada110

Please sign in to comment.