kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-13 17:47:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move examples to https://github.com/react-navigation/examples

Browse Source
This commit is contained in:
Brent Vatne
2018-01-17 12:43:24 -08:00
parent 99c4d448b2
commit 36775007b0
70 changed files with 6 additions and 26715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/ReduxExample/.babelrc
View File

@@ -1,8 +0,0 @@
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}

3
examples/ReduxExample/.gitignore vendored
View File

@@ -1,3 +0,0 @@
node_modules/
.expo/
npm-debug.*

1
examples/ReduxExample/.watchmanconfig
View File

@@ -1 +0,0 @@
{}

27
examples/ReduxExample/App.js
View File

@@ -1,27 +0,0 @@
/**
* @flow
*/
import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import AppReducer from './src/reducers';
import AppWithNavigationState from './src/navigators/AppNavigator';
class ReduxExampleApp extends React.Component {
store = createStore(AppReducer);
render() {
return (
<Provider store={this.store}>
<AppWithNavigationState />
</Provider>
);
}
}
AppRegistry.registerComponent('ReduxExample', () => ReduxExampleApp);
export default ReduxExampleApp;

9
examples/ReduxExample/App.test.js
View File

@@ -1,9 +0,0 @@
import React from 'react';
import App from './App';
import renderer from 'react-test-renderer';
it('renders without crashing', () => {
const rendered = renderer.create(<App />).toJSON();
expect(rendered).toBeTruthy();
});

5
examples/ReduxExample/README.md
View File

@@ -1,5 +0,0 @@
# Redux example
## Usage
Please see the [Contributors Guide](https://reactnavigation.org/docs/guides/contributors#Run-the-Example-App) for instructions on running these example apps.

27
examples/ReduxExample/app.json
View File

@@ -1,27 +0,0 @@
{
"expo": {
"name": "ReduxExample",
"description": "Try out react-navigation with this awesome Redux example",
"version": "1.0.0",
"slug": "ReduxExample",
"privacy": "public",
"orientation": "portrait",
"primaryColor": "#cccccc",
"icon": "./assets/icons/react-navigation.png",
"loading": {
"icon": "./assets/icons/react-navigation.png",
"hideExponentText": false
},
"sdkVersion": "23.0.0",
"entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"packagerOpts": {
"assetExts": [
"ttf",
"mp4"
]
},
"ios": {
"supportsTablet": true
}
}
}

BIN
examples/ReduxExample/assets/icons/react-navigation.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

41
examples/ReduxExample/package.json
View File

@@ -1,41 +0,0 @@
{
"name": "ReduxExample",
"version": "0.0.1",
"private": true,
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"postinstall":
"rm -rf node_modules/react-navigation/{node_modules,examples}",
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "jest-expo",
"modulePathIgnorePatterns": [
"/node_modules/.*/react-native/",
"/node_modules/.*/react/"
],
"transformIgnorePatterns": [
"/node_modules/(?!react-native|react-navigation)/"
]
},
"dependencies": {
"expo": "^23.0.0",
"prop-types": "^15.5.10",
"react": "16.0.0",
"react-native": "^0.50.3",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
},
"devDependencies": {
"babel-jest": "^21.0.0",
"jest": "^21.0.1",
"jest-expo": "^23.0.0",
"react-native-scripts": "^1.3.1",
"react-navigation": "file:../..",
"react-test-renderer": "16.0.0"
}
}

30
examples/ReduxExample/src/components/AuthButton.js
View File

@@ -1,30 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Button } from 'react-native';
import { NavigationActions } from 'react-navigation';
const AuthButton = ({ logout, loginScreen, isLoggedIn }) => (
<Button
title={isLoggedIn ? 'Log Out' : 'Open Login Screen'}
onPress={isLoggedIn ? logout : loginScreen}
/>
);
AuthButton.propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
logout: PropTypes.func.isRequired,
loginScreen: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
isLoggedIn: state.auth.isLoggedIn,
});
const mapDispatchToProps = dispatch => ({
logout: () => dispatch({ type: 'Logout' }),
loginScreen: () =>
dispatch(NavigationActions.navigate({ routeName: 'Login' })),
});
export default connect(mapStateToProps, mapDispatchToProps)(AuthButton);

42
examples/ReduxExample/src/components/LoginScreen.js
View File

@@ -1,42 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
const LoginScreen = ({ navigation }) => (
<View style={styles.container}>
<Text style={styles.welcome}>
Screen A
</Text>
<Text style={styles.instructions}>
This is great
</Text>
<Button
onPress={() => navigation.dispatch({ type: 'Login' })}
title="Log in"
/>
</View>
);
LoginScreen.propTypes = {
navigation: PropTypes.object.isRequired,
};
LoginScreen.navigationOptions = {
title: 'Log In',
};
export default LoginScreen;

42
examples/ReduxExample/src/components/LoginStatusMessage.js
View File

@@ -1,42 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Button, StyleSheet, Text, View } from 'react-native';
import { NavigationActions } from 'react-navigation';
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
const LoginStatusMessage = ({ isLoggedIn, dispatch }) => {
if (!isLoggedIn) {
return <Text>Please log in</Text>;
}
return (
<View>
<Text style={styles.welcome}>
{'You are "logged in" right now'}
</Text>
<Button
onPress={() =>
dispatch(NavigationActions.navigate({ routeName: 'Profile' }))}
title="Profile"
/>
</View>
);
};
LoginStatusMessage.propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
dispatch: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
isLoggedIn: state.auth.isLoggedIn,
});
export default connect(mapStateToProps)(LoginStatusMessage);

27
examples/ReduxExample/src/components/MainScreen.js
View File

@@ -1,27 +0,0 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import LoginStatusMessage from './LoginStatusMessage';
import AuthButton from './AuthButton';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
const MainScreen = () => (
<View style={styles.container}>
<LoginStatusMessage />
<AuthButton />
</View>
);
MainScreen.navigationOptions = {
title: 'Home Screen',
};
export default MainScreen;

30
examples/ReduxExample/src/components/ProfileScreen.js
View File

@@ -1,30 +0,0 @@
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
const ProfileScreen = () => (
<View style={styles.container}>
<Text style={styles.welcome}>
Profile Screen
</Text>
</View>
);
ProfileScreen.navigationOptions = {
title: 'Profile',
};
export default ProfileScreen;

29
examples/ReduxExample/src/navigators/AppNavigator.js
View File

@@ -1,29 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addNavigationHelpers, StackNavigator } from 'react-navigation';
import LoginScreen from '../components/LoginScreen';
import MainScreen from '../components/MainScreen';
import ProfileScreen from '../components/ProfileScreen';
export const AppNavigator = StackNavigator({
Login: { screen: LoginScreen },
Main: { screen: MainScreen },
Profile: { screen: ProfileScreen },
});
const AppWithNavigationState = ({ dispatch, nav }) => (
<AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
);
AppWithNavigationState.propTypes = {
dispatch: PropTypes.func.isRequired,
nav: PropTypes.object.isRequired,
};
const mapStateToProps = state => ({
nav: state.nav,
});
export default connect(mapStateToProps)(AppWithNavigationState);

57
examples/ReduxExample/src/reducers/index.js
View File

@@ -1,57 +0,0 @@
import { combineReducers } from 'redux';
import { NavigationActions } from 'react-navigation';
import { AppNavigator } from '../navigators/AppNavigator';
// Start with two routes: The Main screen, with the Login screen on top.
const firstAction = AppNavigator.router.getActionForPathAndParams('Main');
const tempNavState = AppNavigator.router.getStateForAction(firstAction);
const secondAction = AppNavigator.router.getActionForPathAndParams('Login');
const initialNavState = AppNavigator.router.getStateForAction(
secondAction,
tempNavState
);
function nav(state = initialNavState, action) {
let nextState;
switch (action.type) {
case 'Login':
nextState = AppNavigator.router.getStateForAction(
NavigationActions.back(),
state
);
break;
case 'Logout':
nextState = AppNavigator.router.getStateForAction(
NavigationActions.navigate({ routeName: 'Login' }),
state
);
break;
default:
nextState = AppNavigator.router.getStateForAction(action, state);
break;
}
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
}
const initialAuthState = { isLoggedIn: false };
function auth(state = initialAuthState, action) {
switch (action.type) {
case 'Login':
return { ...state, isLoggedIn: true };
case 'Logout':
return { ...state, isLoggedIn: false };
default:
return state;
}
}
const AppReducer = combineReducers({
nav,
auth,
});
export default AppReducer;

6228
examples/ReduxExample/yarn.lock
View File

File diff suppressed because it is too large Load Diff