子导航器不起作用

Question

我正在尝试在我的应用程序中创建一个子导航功能，并希望显示我所谓的卡片视图列表（现在我只是将它们存储在 ScrollView 中，但没关系），我的目标是以这样的方式显示卡片，以便在我按 1 时显示组件 1 中的内容，按 2 时显示组件 2。

/* @flow */
'use strict';
import React, {
  Component,
    Navigator,
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
    TouchableHighlight,
    Image,
} from 'react-native';
import styles from '../Styles/style';
import home from '../Styles/home';
import feed from '../Styles/feed';
import {Actions} from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';
var CardView = require('./CardView');
var colors = require('../Styles/colorscheme');
var Home = React.createClass({
  getInitialState: function() {
    return {
      componentSelected: 'One'
    }
  },
  changeComponent: function(component) {
    this.setState({
      componentSelected: component  
    })
  },
  renderComponent: function(component) {
      if(component == 'One') {
        return <ComponentOne changeComponent={this.changeComponent} />
      } else if(component == 'Two') {
        return <ComponentTwo changeComponent={this.changeComponent} />
      }
  },
  render: function() {
    return (
      <View>
      <View style={{flex:1}}>
        <View style={styles.controller}>
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <View style={styles.controlItem} 
              onPress={() => 
                this.props.changeComponent('One') }>
              <Text style={{fontSize: 18, color:colors.General.navtext}}>Friends</Text>
            </View>
            <View style={styles.controlItem}
              onPress={() => 
                this.props.changeComponent('Two') }>
              <Text style={{fontSize: 18, color:colors.General.navtext}}>Local</Text>
            </View>
          </ScrollView>
        </View>
        {this.renderComponent(this.state.componentSelected)}
      </View>
    )
  }
})
var ComponentTwo = React.createClass({
  render: function() {
    return (
          <View style={styles.container}>
              <ScrollView showsVerticalScrollIndicator={true}>
                <View style={styles.card}>
                  <CardView
                    name="Short Name"
                    fullname="Full Name"
                    distance="Component Two"
                    title="Example Title" 
                    message="Lorem Ipsum dolor set blablabla" 
                    score="[Symbol for progress]"
                    stars="smallthree"
                    starcolors={colors.General.black}
                    vouched="Example Vouch" />
                </View>
          </ScrollView>
        </View>   
    )
  }
})

var ComponentOne = React.createClass({
  render: function() {
    return (
          <View style={styles.container}>
              <ScrollView showsVerticalScrollIndicator={true}>
                <View style={styles.card}>
                  <CardView
                    name="Short Name"
                    fullname="Full Name"
                    distance="Component Two"
                    title="Example Title" 
                    message="Lorem Ipsum dolor set blablabla" 
                    score="[Symbol for progress]"
                    stars="smallthree"
                    starcolors={colors.General.black}
                    vouched="Example Vouch" />
                </View>
          </ScrollView>
        </View>
      )
  }
})

返回的错误是第 75 行的意外标记，该标记位于代码中第一个组件的渲染函数处（即在"var ComponentTwo"处）。我不知道为什么，我已经寻找丢失的逗号或分号一段时间了，但我迷路了。

Answer 1

问题的答案是删除多余的 View 标签，如原始问题的注释所述，以及 onPress 属性未通过 props 传递的事实，因此它被写为 onPress={() => this.changeComponent('One') } .

但是我也忘了添加一个模块。

谢谢！