Question

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

/* @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行的意外令牌，它位于代码中第一个组件的呈现函数中（即＆＃34; var ComponentTwo＆＃34;）。我不知道为什么，我已经找了一会儿丢失的逗号或分号，但我迷路了。

Answer 1

问题的答案是删除多余的View标签作为对原始问题的评论，以及onPress属性未通过道具传递，因此它被写为 onPress={() => this.changeComponent('One') }。

但我也忘了添加module.exports。

谢谢！

Sub-Navigator无法正常工作

1 个答案: