子导航不工作

我想在我的应用程序中创建一个子导航功能，并希望显示我所谓的cardviews列表（现在我只是将它们存储在一个滚动视图，但从不知道），和我的目标是以这样的方式显示卡片，以便在按两下时按下一个和两个按钮时，组件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意外的标记，其在所述第一部件中的代码的渲染功能（即，在“VAR ComponentTwo”）。我不知道为什么，我已经找了一段时间失踪的逗号或分号，但我迷路了。

来源

2016-04-26 Niklas Lindeke

在你家类渲染方法的第一个视图标签永远不会关闭，试图将其删除> 渲染：函数（）{ 回报（ <查看风格= {{柔性：1}}> 。 .. – bfmags

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

但我也忘了添加一个module.exports。

谢谢！

来源

2016-04-26 18:17:22

子导航不工作

回答

相关问题