反应本机选项卡视图

时间:2019-03-14 11:15:32

标签: ios react-native react-native-tab-view

我正在构建我的第一个react-native应用程序,并使用react-native-tabview实现标签。陷入错误“ TypeError:未定义不是对象(evaluating '_this.props.navigationState.routes.length').

这是我遇到的错误的屏幕截图。

https://i.stack.imgur.com/sg5mX.png

import * as React from 'react';

import {Platform, StyleSheet, Text, View, Dimensions, StatusBar, 
FlatList, ImageBackground, TextInput} from 'react-native';

import { TabView, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);

const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);

export default class App extends React.Component{

state = {
index: 0,
routes: [
  { key: 'first', title: 'First' },
  { key: 'second', title: 'Second' },
],
};

render() {

return (
  <View style={styles.container}>
  <TabView
    navigationState={this.state}
    renderScene={SceneMap({
      first: FirstRoute,
      second: SecondRoute,
    })}
    onIndexChange={index => this.setState({ index })}
    initialLayout={{ width: Dimensions.get('window').width }}
    style={styles.container}
  /></View>    );  } }


const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: StatusBar.currentHeight
},

 scene: {
flex: 1,
 },
});

1 个答案:

答案 0 :(得分:1)

因此,我复制/粘贴并运行了您的代码(具有不同的背景颜色)作为博览会小吃:https://snack.expo.io/B1-xKYu2N,它可以正常工作。

如果这是您的第一个项目,则最有可能的问题是缺少软件包或安装错误。仔细检查您的package.json中是否有"react-native-tab-view": "^2.0.1"之类的内容。如果有(或添加之后),请尝试从项目目录内部的终端中运行rm -rf ./node_modules && npm install,以删除软件包并重新安装它们。希望我能提供更多帮助!