反应天然.塔巴尔不更改场景以下按钮

Question

我在此github之后创建塔巴尔https://github.com/skv-headless/reaeact-native-native-scrollable-tab-view

我需要像这样创建塔巴尔

所以，我尝试了。但对我不起作用。我的场景没有改变，我点击tabar。也许我在代码中有一些问题。

有人可以给我一个例子吗？和关于塔巴尔的详细信息。

谢谢

这是我的代码。

rout.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

信息。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

Answer 1

我也使用相同的插件，并且您只有3个选项卡，然后您不需要scrollableTabbar，您也可以使用defaultTabbar，因为只有3个选项卡。以下是相同的示例的代码。

<ScrollableTabView renderTabBar={() => <DefaultTabBar /> }>
   <View tabLabel={label1}></View>
   <View tabLabel={label2}></View>
   <View tabLabel={label3}></View>
</ScrollableTabView>

以及关于代码的更改，我认为您必须在scrollabletabview中呈现所有构成，如下

<ScrollableTabView renderTabBar={() => <DefaultTabBar /> }>
   <View tabLabel={'Profile'}> <Profile/></View>
   <View tabLabel={'Route'}> /*Render Route component directly here */</View>
   <View tabLabel={'Infomation'}><Infomation/></View>
</ScrollableTabView>