请教一个navigator的问题

来源:

qq_superATC_03291580

2016-11-27

index.ios.js 页面

import React, { Component } from 'react';

import Icon from 'react-native-vector-icons/Ionicons';

//引入工具类

import Utils from './ios_app/utils';

//引入页面

import Main from './ios_app/main';

import Weiclass from './ios_app/weiclass';

import Videoclass from './ios_app/videoclass';

import Setting from './ios_app/settings';


import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  Image,

  StatusBar,

  TabBarIOS,

  Navigator

} from 'react-native';


export default class languiji extends Component {


  constructor(props) {

    super(props);

      

    this.state = {

      selectedTab: 'main'

    };

  }


  render() {

    return (

      <View style={styles.container}>

        <TabBarIOS

          unselectedTintColor="#999"

          tintColor="#53B5EF"

          barTintColor="#F9F9F9">

          <Icon.TabBarItem

            title="发现"

            iconName="ios-home-outline"

            selectedIconName="ios-home-outline"

            selected={this.state.selectedTab === 'main'}

            onPress={() => {

              this.setState({

                selectedTab: 'main',

              });

            }}>

            <Navigator

              initialRoute={{ name: 'main', component: Main }}

              configureScene={(route) => {

                return Navigator.SceneConfigs.FloatFromRight;

              }}

              renderScene={(route, navigator) => {

                let Component = route.component;

                return <Component {...route.params} navigator={navigator} />

              }} />

          </Icon.TabBarItem>

          <Icon.TabBarItem

            title="微课堂"

            iconName="ios-color-filter-outline"

            selectedIconName="ios-color-filter-outline"

            selected={this.state.selectedTab === 'weiclass'}

            onPress={() => {

              this.setState({

                selectedTab: 'weiclass'

              });

            }}>

            <Weiclass />

          </Icon.TabBarItem>

          <Icon.TabBarItem

            title="系列课"

            iconName="ios-film-outline"

            selectedIconName="ios-film-outline"

            selected={this.state.selectedTab === 'videoclass'}

            onPress={() => {

              this.setState({

                selectedTab: 'videoclass'

              });

            }}>

            <Videoclass />

          </Icon.TabBarItem>

          <Icon.TabBarItem

            title="设置"

            iconName="ios-cog"

            selectedIconName="ios-cog"

            selected={this.state.selectedTab === 'settings'}

            onPress={() => {

              this.setState({

                selectedTab: 'settings'

              });

            }}>

            <Setting />

          </Icon.TabBarItem>

        </TabBarIOS>

      </View>  

    );

  }

}

AppRegistry.registerComponent('languiji', () => languiji);

-----------------------------------------------------

main.js

import React, { Component } from 'react';

import Icon from 'react-native-vector-icons/Ionicons';

import Swiper from 'react-native-swiper';

//引入工具类

import Utils from './utils';

//引入子模版

import Header from './sub_components/header';

import AniImage from './sub_components/animg';

import TitleBox from './sub_components/titleBox';

import FuncTabs from './sub_components/funcTabs';

//引入子页面

import Weivideo from './weivideo';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  Image,

  StatusBar,

  ScrollView,

  ListView,

  RefreshControl,

  TouchableOpacity

} from 'react-native';


//最新微课列表子组件

export class NewWeiClassList extends Component{

  constructor(props) {

    super(props);

    let row = this.props.row;


    this.state = {

      row: row

    }

  }

  render(){

    let row = this.state.row;

    return(

      <TouchableOpacity onPress={this.props.onSelect}>

        <View style={styles.classItem}>

           <AniImage

              inputRange={[0, 100]}

              outputRange={[0, 1]}

              url={Utils.APIs.WEICLASSIMG + row.folder + '.jpg'} 

              style={styles.classImg} 

           />

           <View style={styles.classnameBox}></View>

           <View style={styles.classnameBox2}>

              <Text style={styles.classnameText} numberOfLines={1}>{row.classname}</Text>

           </View>

        </View>

      </TouchableOpacity>

    )

  }

}


export class main extends Component {

    constructor(props) {

      super(props);

      let ds = new ListView.DataSource({

        rowHasChanged: (r1, r2) => r1 !== r2

      }) 

      this.state = {

        isRefreshing: false,

        headerTitle: '蓝轨迹',

        weiClassDataSource: ds.cloneWithRows([])

      };

    }

    //最新微课列表视图

    weiClassRenderRow(row){

       return <NewWeiClassList 

                 key={row.id} 

---->问题在这一行!两种都显示同样的错误,见最后的图   onSelect={() => this._openWeiVideo(row)}

                                                                              //onSelect={() => this._openWeiVideo(row).bind(this)}

                 row={row}

              />

    }

    componentDidMount(){

      this._fetchWeiClassList();

      this._fetchHotWeiClassList();

      this._fetchBestClassList();

    }

    _onRefresh() {

      if(this.state.isRefreshing){

        return;

      }

      this.setState({

        isRefreshing: true

      });

      setTimeout(() => {

        this._fetchWeiClassList();

        this._fetchHotWeiClassList();

        this._fetchBestClassList();


        this.setState({

          isRefreshing: false

        });

      }, 2000);

    }

    _openWeiVideo(row){

      this.props.navigator.push({

        name: 'weivideo',

        component: Weivideo,

        params:{

          row: row

        }

      })

    }

    //获取10节最新微课

    _fetchWeiClassList(){

      var that = this;

      let formData = new FormData();

      formData.append("num", 10);

      Utils.post(Utils.APIs.BASE + 'getManyWeiClassList', formData, function(responseJson){

          that.setState({

            weiClassDataSource: that.state.weiClassDataSource.cloneWithRows(responseJson) 

          })

      },function(error){

         console.log(error);

      })

    }

    render(){

      return(

        <View style={styles.container}>

          <StatusBar

            barStyle={'light-content'}

          />

          <Header title={this.state.headerTitle} />

          <ScrollView

            automaticallyAdjustContentInsets={false}

            showsVerticalScrollIndicator={false}

            refreshControl={

              <RefreshControl

                refreshing={this.state.isRefreshing}

                onRefresh={this._onRefresh.bind(this)}

                tintColor="#4188C6"

              />

            }

          >

            <View style={styles.topicBox}>

               <TitleBox title="最新微课" 

                         rightText="更多"

                         hasBottomBorder="false"

                         />

               <ScrollView style={styles.topicSV}

                  automaticallyAdjustContentInsets={false}

                  showsHorizontalScrollIndicator={false}

                >

                  <ListView

                     dataSource={this.state.weiClassDataSource}

                     renderRow={this.weiClassRenderRow}

                     enableEmptySections={true}

                     horizontal={true}

                     showsHorizontalScrollIndicator={false}

                   />

                </ScrollView>

            </View>

          </ScrollView>

         </View>

      )

   }

}

module.exports = main;



5839c2620001bb6a05000211.jpg

写回答

3回答

Scott

2016-11-27

renderRow={this.weiClassRenderRow}


这个有 bind this 么


renderRow={this.weiClassRenderRow.bind(this)}

0
1
qq_superATC_03291580
非常感谢老师的解答!
2016-11-27
共1条回复

qq_superATC_03291580

提问者

2016-11-27

已解决!加上了.bind(this)  renderRow={this.weiClassRenderRow.bind(this)}

                                     onSelect={() => this._openWeiVideo(row)}


0
1
iMoocAdministrator
你好啊
2017-08-18
共1条回复

qq_superATC_03291580

提问者

2016-11-27

加上了.bind(this)  renderRow={this.weiClassRenderRow.bind(this)}
                  onSelect={() => this._openWeiVideo(row).bind(this)}

//szimg.mukewang.com/583abe110001429e08040274.jpg

0
0

贯穿全栈React Native开发App

全面掌握React Native技术,不止步前端开发,让你移动领域大放光彩

946 学习 · 385 问题

查看课程