mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
Added support for navigation
This commit is contained in:
parent
61ea8f2963
commit
7d7ee268f0
@ -2,12 +2,12 @@ import React, { Component } from 'react';
|
||||
import { AppRegistry, View, Button, TextInput } from 'react-native';
|
||||
|
||||
import { connect } from 'react-redux'
|
||||
import { createStore } from 'redux';
|
||||
import { Provider } from 'react-redux'
|
||||
import { createStore } from 'redux';
|
||||
import { combineReducers } from 'redux';
|
||||
|
||||
import { WebApi } from 'src/web-api.js'
|
||||
import { Database } from 'src/database.js'
|
||||
//import { Session } from 'src/model/session.js';
|
||||
|
||||
import { SessionService } from 'src/services/session-service.js';
|
||||
|
||||
@ -16,88 +16,88 @@ import { Log } from 'src/log.js'
|
||||
import { LoginButton } from 'src/components/login-button.js';
|
||||
|
||||
|
||||
let debugMode = true;
|
||||
let clientId = 'A7D301DA7D301DA7D301DA7D301DA7D3';
|
||||
// let debugMode = true;
|
||||
// let clientId = 'A7D301DA7D301DA7D301DA7D301DA7D3';
|
||||
|
||||
let db = new Database();
|
||||
db.setDebugEnabled(debugMode);
|
||||
db.open();
|
||||
// let db = new Database();
|
||||
// db.setDebugEnabled(debugMode);
|
||||
// db.open();
|
||||
|
||||
|
||||
|
||||
let defaultState = {
|
||||
'myButtonLabel': 'click',
|
||||
'counter': 0,
|
||||
}
|
||||
// let defaultState = {
|
||||
// 'myButtonLabel': 'click',
|
||||
// 'counter': 0,
|
||||
// }
|
||||
|
||||
function shallowcopy(a) {
|
||||
return Object.assign({}, a);
|
||||
}
|
||||
// function shallowcopy(a) {
|
||||
// return Object.assign({}, a);
|
||||
// }
|
||||
|
||||
let store = createStore(reducer, defaultState);
|
||||
// let store = createStore(reducer, defaultState);
|
||||
|
||||
function reducer(state, action) {
|
||||
switch (action.type) {
|
||||
// function reducer(state, action) {
|
||||
// switch (action.type) {
|
||||
|
||||
case 'SET_BUTTON_NAME':
|
||||
// case 'SET_BUTTON_NAME':
|
||||
|
||||
var state = shallowcopy(state);
|
||||
state.myButtonLabel = action.name;
|
||||
return state;
|
||||
// var state = shallowcopy(state);
|
||||
// state.myButtonLabel = action.name;
|
||||
// return state;
|
||||
|
||||
case 'INC_COUNTER':
|
||||
// case 'INC_COUNTER':
|
||||
|
||||
var state = shallowcopy(state);
|
||||
state.counter++;
|
||||
return state;
|
||||
// var state = shallowcopy(state);
|
||||
// state.counter++;
|
||||
// return state;
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
return state;
|
||||
}
|
||||
// return state;
|
||||
// }
|
||||
|
||||
class MyInput extends Component {
|
||||
// class MyInput extends Component {
|
||||
|
||||
render() {
|
||||
return <TextInput onChangeText={this.props.onChangeText} />
|
||||
}
|
||||
// render() {
|
||||
// return <TextInput onChangeText={this.props.onChangeText} />
|
||||
// }
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
const mapStateToInputProps = function(state) {
|
||||
return {}
|
||||
}
|
||||
// const mapStateToInputProps = function(state) {
|
||||
// return {}
|
||||
// }
|
||||
|
||||
const mapDispatchToInputProps = function(dispatch) {
|
||||
return {
|
||||
onChangeText(text) {
|
||||
dispatch({
|
||||
type: 'SET_BUTTON_NAME',
|
||||
name: text
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// const mapDispatchToInputProps = function(dispatch) {
|
||||
// return {
|
||||
// onChangeText(text) {
|
||||
// dispatch({
|
||||
// type: 'SET_BUTTON_NAME',
|
||||
// name: text
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
const MyConnectionInput = connect(
|
||||
mapStateToInputProps,
|
||||
mapDispatchToInputProps
|
||||
)(MyInput)
|
||||
// const MyConnectionInput = connect(
|
||||
// mapStateToInputProps,
|
||||
// mapDispatchToInputProps
|
||||
// )(MyInput)
|
||||
|
||||
class App extends Component {
|
||||
// class App extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<View>
|
||||
<MyConnectionInput />
|
||||
<LoginButton />
|
||||
</View>
|
||||
</Provider>
|
||||
)
|
||||
}
|
||||
// render() {
|
||||
// return (
|
||||
// <Provider store={store}>
|
||||
// <View>
|
||||
// <MyConnectionInput />
|
||||
// <LoginButton />
|
||||
// </View>
|
||||
// </Provider>
|
||||
// )
|
||||
// }
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
// let api = new WebApi('http://192.168.1.2');
|
||||
// let sessionService = new SessionService(api);
|
||||
@ -109,4 +109,96 @@ class App extends Component {
|
||||
// console.warn(error);
|
||||
// })
|
||||
|
||||
AppRegistry.registerComponent('AwesomeProject', () => App);
|
||||
// AppRegistry.registerComponent('AwesomeProject', () => App);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import { StackNavigator } from 'react-navigation';
|
||||
import { addNavigationHelpers } from 'react-navigation';
|
||||
|
||||
class MainScreen extends React.Component {
|
||||
static navigationOptions = {
|
||||
title: 'Welcome',
|
||||
};
|
||||
render() {
|
||||
const { navigate } = this.props.navigation;
|
||||
return (
|
||||
<Button
|
||||
title="Go to Jane's profile"
|
||||
onPress={() =>
|
||||
navigate('Profile', { name: 'Jane' })
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class ProfileScreen extends React.Component {
|
||||
static navigationOptions = {
|
||||
title: 'Profile',
|
||||
};
|
||||
render() {
|
||||
const { navigate } = this.props.navigation;
|
||||
return (
|
||||
<Button
|
||||
title="Go to main"
|
||||
onPress={() =>
|
||||
navigate('Main')
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const AppNavigator = StackNavigator({
|
||||
Main: {screen: MainScreen},
|
||||
Profile: {screen: ProfileScreen},
|
||||
});
|
||||
|
||||
class AppComponent extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<AppNavigator navigation={addNavigationHelpers({
|
||||
dispatch: this.props.dispatch,
|
||||
state: this.props.nav,
|
||||
})} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const navInitialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Main'));
|
||||
|
||||
const navReducer = (state = navInitialState, action) => {
|
||||
const nextState = AppNavigator.router.getStateForAction(action, state);
|
||||
return nextState || state;
|
||||
};
|
||||
|
||||
const appReducer = combineReducers({
|
||||
nav: navReducer,
|
||||
});
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
nav: state.nav
|
||||
});
|
||||
|
||||
const App = connect(mapStateToProps)(AppComponent);
|
||||
|
||||
const store = createStore(appReducer);
|
||||
|
||||
class Root extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//AppRegistry.registerComponent('AwesomeProject', () => AppNavigator);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => Root);
|
@ -1,26 +1,27 @@
|
||||
{
|
||||
"name": "AwesomeProject",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "node node_modules/react-native/local-cli/cli.js start",
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "16.0.0-alpha.6",
|
||||
"react-native": "0.44.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "19.0.0",
|
||||
"babel-preset-react-native": "1.9.1",
|
||||
"jest": "19.0.2",
|
||||
"react-test-renderer": "16.0.0-alpha.6",
|
||||
"redux": "3.6.0",
|
||||
"react-redux": "4.4.8",
|
||||
"query-string": "4.3.4",
|
||||
"react-native-sqlite-storage": "3.3.*",
|
||||
},
|
||||
"jest": {
|
||||
"preset": "react-native"
|
||||
}
|
||||
}
|
||||
"name": "AwesomeProject",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "node node_modules/react-native/local-cli/cli.js start",
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "16.0.0-alpha.6",
|
||||
"react-native": "0.44.0",
|
||||
"react-navigation": "^1.0.0-beta.9"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "19.0.0",
|
||||
"babel-preset-react-native": "1.9.1",
|
||||
"jest": "19.0.2",
|
||||
"react-test-renderer": "16.0.0-alpha.6",
|
||||
"redux": "3.6.0",
|
||||
"react-redux": "4.4.8",
|
||||
"query-string": "4.3.4",
|
||||
"react-native-sqlite-storage": "3.3.*"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "react-native"
|
||||
}
|
||||
}
|
||||
|
@ -6,14 +6,15 @@ import { _ } from 'src/locale.js';
|
||||
class LoginButtonComponent extends Component {
|
||||
|
||||
render() {
|
||||
return <Button onPress={this.props.onPress} title={_(this.props.label)} />
|
||||
return <Button onPress={this.props.onPress} title={_("Login")} />
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const LoginButton = connect(
|
||||
(state) => {
|
||||
return { label: state.myButtonLabel };
|
||||
return {};
|
||||
//return { label: state.myButtonLabel };
|
||||
},
|
||||
(dispatch) => {
|
||||
return {
|
||||
|
29
ReactNativeClient/src/components/offline-button.js
Normal file
29
ReactNativeClient/src/components/offline-button.js
Normal file
@ -0,0 +1,29 @@
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux'
|
||||
import { Button } from 'react-native';
|
||||
import { _ } from 'src/locale.js';
|
||||
|
||||
class OfflineButtonComponent extends Component {
|
||||
|
||||
render() {
|
||||
return <Button onPress={this.props.onPress} title={_(this.props.label)} />
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const OfflineButton = connect(
|
||||
(state) => {
|
||||
//return { label: state.myButtonLabel };
|
||||
},
|
||||
(dispatch) => {
|
||||
return {
|
||||
onPress: function() {
|
||||
dispatch({
|
||||
type: 'WORK_OFFLINE'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
)(OfflineButtonComponent)
|
||||
|
||||
export { OfflineButton };
|
Loading…
Reference in New Issue
Block a user