You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
4.3 KiB
140 lines
4.3 KiB
import React, { Component } from 'react';
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
Image,
|
|
ListView,
|
|
Text,
|
|
ScrollView,
|
|
TextInput,
|
|
TouchableHighlight,
|
|
View
|
|
} from 'react-native';
|
|
|
|
import RunInfo from './components/run-info';
|
|
import RunInfoNumeric from './components/run-info-num';
|
|
|
|
import MapView from 'react-native-maps';
|
|
const instructions = Platform.select({
|
|
ios: 'Press Cmd+R to reload,\n' +
|
|
'Cmd+D or shake for dev menu',
|
|
android: 'Double tap R on your keyboard to reload,\n' +
|
|
'Shake or press menu button for dev menu',
|
|
});
|
|
|
|
{/*<View style={{flex: 1}}>*/}
|
|
{/*<MapView style={styles.map}*/}
|
|
{/*showsUserLocation*/}
|
|
{/*followsUserLocation*/}
|
|
{/*initialRegion={{*/}
|
|
{/*latitude: 37.33307,*/}
|
|
{/*longitude: -122.0324,*/}
|
|
{/*latitudeDelta: 0.02,*/}
|
|
{/*longitudeDelta: 0.02*/}
|
|
{/*}}*/}
|
|
{/*/>*/}
|
|
|
|
type Props = {};
|
|
export default class App extends Component<Props> {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
let ds = new ListView.DataSource({rowHasChanged: (a, b) => a !== b});
|
|
this.state = {dataSource: ds.cloneWithRows([
|
|
'john', 'joel', 'miki', 'iu lol', 'yeeet',
|
|
'john', 'joel', 'miki', 'iu lol', 'yeeet',
|
|
'john', 'joel', 'miki', 'iu lol', 'yeeet',
|
|
'john', 'joel', 'miki', 'iu lol', 'yeeet',
|
|
'john', 'joel', 'miki', 'iu lol', 'yeeet',
|
|
])};
|
|
|
|
setInterval(() => {
|
|
// this.distanceInfo.setState({value: Math.random() * 100});
|
|
// this.speedInfo.setState({value: Math.random() * 15});
|
|
// this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
|
|
}, 1000);
|
|
}
|
|
render() {
|
|
|
|
return (
|
|
<ListView
|
|
dataSource={this.state.dataSource}
|
|
renderSeparator={() => <View style = {{backgroundColor: '#CCC', height: 1}}/>}
|
|
renderRow={(row) => (
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Image source = {{uri: 'https://i.imgur.com/Zbv1S4G.png'}} style = {{width: 50, margin: 10}}/>
|
|
<Text style = {{fontSize: 25, padding: 10}}>{row}</Text>
|
|
</View>
|
|
)}
|
|
/>
|
|
// <View style ={{flex: 1}}>
|
|
// <TextInput
|
|
// style={styles.textInput}
|
|
// autoCapitalize="words"
|
|
// placeholder="Type something"
|
|
// onChangeText={(text) => this.setState({text})}
|
|
// onBlur={() => this.setState({ text: this.state.text.toUpperCase() })}
|
|
// />
|
|
//
|
|
// <TouchableHighlight
|
|
// onPress={() => this.setState({confirmedText: this.state.text})}
|
|
// onLongPress={() => this.setState({confirmedText: this.state.text.toLowerCase()})}
|
|
// >
|
|
// <Text style={{fontSize: 16, backgroundColor: '#EEE', textAlign: 'center'}}>Press Me</Text>
|
|
// </TouchableHighlight>
|
|
//
|
|
// <Text style={{flex: 1, fontSize: 18}}>
|
|
// {this.state.confirmedText}
|
|
// </Text>
|
|
//
|
|
// <View style={styles.infoWrapper}>
|
|
//
|
|
// <RunInfoNumeric title = "Distance"
|
|
// unit="km"
|
|
// ref={(info) => this.distanceInfo = info}
|
|
// />
|
|
// <RunInfoNumeric title = "Speed"
|
|
// unit="km/h"
|
|
// ref={(info) => this.speedInfo = info}
|
|
// />
|
|
// <RunInfo title = "Direction"
|
|
// value = "NE"
|
|
// ref={(info) => this.directionInfo = info}
|
|
// />
|
|
// </View>
|
|
// </View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
infoWrapper: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
flexDirection: 'row',
|
|
flex: 1
|
|
},
|
|
map: {
|
|
...StyleSheet.absoluteFillObject
|
|
},
|
|
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: '#F5FCFF',
|
|
},
|
|
welcome: {
|
|
fontSize: 20,
|
|
textAlign: 'center',
|
|
margin: 10,
|
|
},
|
|
instructions: {
|
|
textAlign: 'center',
|
|
color: '#333333',
|
|
marginBottom: 5,
|
|
},
|
|
});
|