子導航不工作

我想在我的應用程序中創建一個子導航功能，並希望顯示我所謂的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

子導航不工作

回答

相關問題