0
我創建的TabBar下面這個GitHub的 https://github.com/skv-headless/react-native-scrollable-tab-view反應原生。的TabBar沒有改變場景以下按鈕
，我需要這樣的
等創造的TabBar，我試過了。但不適合我。我的場景不變，按照我點擊tabbar。或者我的代碼中有一些問題。
任何人都可以給我一些例子嗎？和我不明白的tabbar細節。
謝謝
這是我的代碼。
Route.js
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
View,
Text,
Image,
Dimensions,
TouchableOpacity,
MapView,
zoom,
DeviceEventEmitter
} from 'react-native';
import {Accelerometer, Gyroscope, Magnetometer} from 'NativeModules';
var {height, width} = Dimensions.get('window');
import api from './api';
import Profile from './Profile';
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import Info from './Info';
// import motion from './motion';
export default class Route extends Component {
constructor(props){
super(props);
this.state = {
Accx: 0,
Accy: 0,
Accz: 0,
Gyx: 0,
Gyy: 0,
Gyz: 0,
Magx: 0,
Magy: 0,
Magz: 0,
region: {
latitude: 13.980881,
longitude: 100.5545009,
}
};
this.onRegionChange = this.onRegionChange.bind(this);
}
componentDidMount() {
Accelerometer.setAccelerometerUpdateInterval(0.1); // in seconds
DeviceEventEmitter.addListener('AccelerationData', (data) => {
this.setState({
Accx: data.acceleration.x,
Accy: data.acceleration.y,
Accz: data.acceleration.z,
});
});
Accelerometer.startAccelerometerUpdates(); // you'll start getting AccelerationData events above
Gyroscope.setGyroUpdateInterval(0.1); // in seconds
DeviceEventEmitter.addListener('GyroData', (data) => {
this.setState({
Gyx: data.rotationRate.x,
Gyy: data.rotationRate.y,
Gyz: data.rotationRate.z,
});
});
Gyroscope.startGyroUpdates(); // you'll start getting GyroscopicData events above
Magnetometer.setMagnetometerUpdateInterval(0.1); // in seconds
DeviceEventEmitter.addListener('MagnetometerData', (data) => {
this.setState({
Magx: data.magneticField.x,
Magy: data.magneticField.y,
Magz: data.magneticField.z,
});
});
Magnetometer.startMagnetometerUpdates(); // you'll start getting MagnetomerData events above
}
onRegionChange(region) {
this.setState({ region });
}
render() {
return (
<View style={styles.container}>
<ScrollableTabView
style={{marginTop: 20, }}
initialPage={1}
renderTabBar={() => <ScrollableTabBar />}
>
<Text tabLabel='Profile'></Text>
<Text tabLabel='Route'></Text>
<Text tabLabel='Information'></Text>
</ScrollableTabView>
<TouchableOpacity tabLabel='Profile' onPress={() => this.tabView.Profile(0)}>
</TouchableOpacity>
<TouchableOpacity tabLabel='Route' onPress={() => this.tabView.Route(1)}>
</TouchableOpacity>
<TouchableOpacity tabLabel='Information' onPress={() => this.tabView.Route(2)}>
</TouchableOpacity>
<MapView style={styles.map}
mapType="standard"
showsUserLocation={true}
followsUserLocation={true}
showsCompass={false}
showsPointOfInterest={false}
region={this.state.region}
onRegionChange={this.onRegionChange}
>
</MapView>
<View style={styles.container}>
<Text>
Latitude: {this.state.region.latitude}{'\n'}
Longitude: {this.state.region.longitude}{'\n'}
AccX: {this.state.Accx}
AccY: {this.state.Accy}
AccZ: {this.state.Accz}{'\n'}
GyX: {this.state.Gyx}
GyY: {this.state.Gyy}
GyZ: {this.state.Gyz}{'\n'}
MagX: {this.state.Magx}
MagY: {this.state.Magy}
MagZ: {this.state.Magz}{'\n'}
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white'
},
image: {
width: 200,
height: 180,
},
text: {
color: 'white',
fontWeight: 'bold',
backgroundColor: 'transparent',
marginTop: 20,
},
map: {
//top: -150,
width: 700,
height: 400
}
});
Profile.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
tabIcon: {
width: 16,
height: 16,
},
});
const Profile =() => {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
THIS IS THE profile SCREEN!
</Text>
</View>
);
}
export default Profile
Information.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
tabIcon: {
width: 16,
height: 16,
},
});
const Infomation =() => {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
THIS IS THE info SCREEN!
</Text>
</View>
);
}
export default Information