Add some usage tips to tips page

This commit is contained in:
Tanner Collin 2017-02-06 19:01:57 -07:00
parent a35a693451
commit 932dea9746
7 changed files with 72 additions and 2 deletions

View File

@ -7,4 +7,5 @@ export const MAIN = 'MAIN';
export const CHART = 'CHART'; export const CHART = 'CHART';
export const HELP = 'HELP'; export const HELP = 'HELP';
export const EXAMPLE = 'EXAMPLE'; export const EXAMPLE = 'EXAMPLE';
export const TIPS = 'TIPS';
export const ABOUT = 'ABOUT'; export const ABOUT = 'ABOUT';

View File

@ -36,6 +36,12 @@ export function example() {
}; };
} }
export function tips() {
return {
type: types.TIPS
};
}
export function about() { export function about() {
return { return {
type: types.ABOUT type: types.ABOUT

View File

@ -22,7 +22,7 @@ export default class Menu extends Component {
} }
render() { render() {
const {about, main, chart, help, example} = this.props; const {about, main, chart, help, tips, example} = this.props;
return ( return (
<View style={styles.main}> <View style={styles.main}>
@ -32,7 +32,7 @@ export default class Menu extends Component {
<MyText style={styles.menutable} onPress={chart}>Color Chart</MyText> <MyText style={styles.menutable} onPress={chart}>Color Chart</MyText>
<MyText style={styles.menutable} onPress={help}>Help</MyText> <MyText style={styles.menutable} onPress={help}>Help</MyText>
<MyText style={styles.menutable} onPress={example}>Example</MyText> <MyText style={styles.menutable} onPress={example}>Example</MyText>
<MyText style={styles.menutable} onPress={null}>Tips</MyText> <MyText style={styles.menutable} onPress={tips}>Tips</MyText>
<MyText style={[styles.menutable, {borderBottomWidth: 0}]} onPress={about}>About</MyText> <MyText style={[styles.menutable, {borderBottomWidth: 0}]} onPress={about}>About</MyText>
</ScrollView> </ScrollView>
<Image style={{alignSelf: 'flex-end', height: 20, width: 116}} source={require('../images/menulogobottom.png')} resizeMode={'contain'} /> <Image style={{alignSelf: 'flex-end', height: 20, width: 116}} source={require('../images/menulogobottom.png')} resizeMode={'contain'} />

37
src/components/tips.js Normal file
View File

@ -0,0 +1,37 @@
import React, {Component} from 'react';
import {ScrollView, View} from 'react-native';
import MyText from './mytext.js';
import Section from './section.js';
export default class Tips extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ScrollView>
<View style={{padding: 20}}>
<Section>
<MyText style={{fontWeight: 'bold'}}>Don't hold both resistor leads while measuring</MyText>
<MyText>The resistance of your body added in parallel is enough to effect the measurement of higher valued resistors. Since the purpose of this app is to help you create a precise resistance value, doing so is counterproductive.</MyText>
</Section>
<Section>
<MyText style={{fontWeight: 'bold'}}>Don't press the resistor leads against an ESD mat</MyText>
<MyText>Most ESD mats are slightly conductive to allow static charges to dissipate. This also has the problem of affecting the resistance measurement of higher valued resistors.</MyText>
</Section>
<Section>
<MyText style={{fontWeight: 'bold'}}>Use only one hand to hold the resistor</MyText>
<MyText>When measuring the resistors, use only one hand to hold the resistor to a multimeter lead. Grip the other multimeter lead by only the plastic part with your other hand. Then use the tension in the resistor's remaining lead to bring the two together and form a circuit.</MyText>
</Section>
<Section>
<MyText style={{fontWeight: 'bold'}}>Increase precision by adding significant figures</MyText>
<MyText>You can increase the precision of the calculations shown by the app by adding more significant figures to your target resistance. This way you can make your solution as precise as you need.</MyText>
</Section>
</View>
</ScrollView>
);
}
}

View File

@ -12,6 +12,7 @@ import ChartApp from '../containers/chartApp';
import CalcApp from '../containers/calcApp'; import CalcApp from '../containers/calcApp';
import HelpApp from '../containers/helpApp'; import HelpApp from '../containers/helpApp';
import ExampleApp from '../containers/exampleApp'; import ExampleApp from '../containers/exampleApp';
import TipsApp from '../containers/tipsApp';
import AboutApp from '../containers/aboutApp'; import AboutApp from '../containers/aboutApp';
class Nav extends Component { class Nav extends Component {
@ -67,6 +68,8 @@ class Nav extends Component {
return <HelpApp />; return <HelpApp />;
case 'example': case 'example':
return <ExampleApp />; return <ExampleApp />;
case 'tips':
return <TipsApp />;
case 'about': case 'about':
return <AboutApp />; return <AboutApp />;
default: default:

16
src/containers/tipsApp.js Normal file
View File

@ -0,0 +1,16 @@
'use strict';
import React, {Component} from 'react';
import Tips from '../components/tips';
export default class TipsApp extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Tips />
);
}
}

View File

@ -48,6 +48,13 @@ export default function menu(state = initialState, action = {}) {
page: 'example', page: 'example',
subtitle: 'Example Usage', subtitle: 'Example Usage',
}; };
case types.TIPS:
return {
...state,
isOpen: false,
page: 'tips',
subtitle: 'Tips',
};
case types.ABOUT: case types.ABOUT:
return { return {
...state, ...state,