React Native开发问题记录

1233 查看

1、null is not an object(evaluating prevComponentInstance._currentElement)

今晚在码iCityAction过程中,遇到了该问题。主要是在为ListView的Item添加TouchableOpacity组件的时候,没有在构造方法中对相应函数进行bind操作。谷歌了下,在stackoverflow上找到了解决办法:

// ES6
constructor(props) {    
  super(props);        
  this._renderNewsList = this._renderNewsList.bind(this);
  this.state = {...}
}

对应的_renderNewsList进行以下方式的绑定:

_renderNewsList(category) {    
  let imageCount = category.image_count;    
  if (category.type === 'news') {        
    return (            
      imageCount > 1 ? 
        <MultiImageCell category={category} touchAction={this._pushToDetailPage.bind(this, category)}/>                
      : <SingleImageCell category={category} touchAction={this._pushToDetailPage.bind(this, category)}/>       
    )    
  }            
  return (
    <AdCell category={category} touchAction={this._pushToDetailPage.bind(this, category)}/>
  )
}

在MultiImageCell中就可以这样来使用:

export default class MultiImageCell extends Component {    
  render() {        
    let { category } = this.props;
    ...
    return (            
      <TouchableOpacity onPress={this.props.touchAction}>
        ... 
      </TouchableOpacity>       
    )    
  }
}

2、TabBarIOS怎样才能在首页显示,而在内页不显示?

今天继续处理iCityAction之前遗留的问题。比如tarBar显示或隐藏的需求,在原生中是比较容易实现的,但React Native官方文档中并没有相关的API。通过谷歌的协助,找到一些解决方案,经过修改,最终在自己项目中实现了这个功能。
1)项目的入口文件引用的是Root组件:

// index.ios.js
  ...
import Root from './app/Root';
AppRegistry.registerComponent('iCityAction', () => Root);

2)在Root组件中引用TabBarView:

// Root.js
  ...
export default class Root extends Component {    
  render() {        
    return (            
      <View style={styles.container}>                
        <StatusBar barStyle='light-content'/>                
        <Navigator                    
          initialRoute={{name:'TabBarView',component:TabBarView}}
          configureScene={() => {                        
            return Navigator.SceneConfigs.PushFromRight;                    
          }}                    
          renderScene={(route, navigator) => {                        
            let Component = route.component;                        
            return (                            
              <Component navigator = {navigator} route = {route} {...route.passProps} />                        
            )
          }}                
        />            
      </View>        
    )    
  }}

3)在TabBarView中进行各页面的渲染,并将Root组件传过来的参数navigator作为页面组件的参数:

// TabBarView.js
  ...
const tabBarItems = [    
  {title: '首页', icon: 'home', component: News},    
  {title: '视频', icon: 'play-circle-o', component: Video},   
  {title: '互动', icon: 'tv', component: Live},    
  {title: '社区', icon: 'comments-o', component: Community},   
  {title: '我的', icon: 'user', component: User},]
export default class TabBarView extends Component {
  constructor(props) {        
    super(props);        
    this.state = {            
      selectedTab: tabBarItems[0].title,        
    };    
  }    
  render() {        
    return (            
      <TabBarIOS tintColor='red'>    
      {                    
        tabBarItems.map((controller, i) => {                        
          let Component = controller.component;                        
            return (                            
              <FontAwesome.TabBarItem                                
                key={i}                                
                title={controller.title}                                
                selected={this.state.selectedTab === controller.title}                                
                iconName={controller.icon}                                
                selectedIconName={controller.icon}                                
                onPress={() => {                                    
                  this.setState({
                    selectedTab: controller.title                           
                  })                                
                }}                            
              >                                
                <Component navigator={this.props.navigator}/>                            
              </FontAwesome.TabBarItem>                        
            )                    
        })                
      }            
      </TabBarIOS>        
    )    
  }
}

4)最后,在页面组件中采用this.props.navigator.push()的形式来进行页面跳转,这样就能达到隐藏tabBar的效果了。

// News.js
  ...
_searchAction() {    
  InteractionManager.runAfterInteractions(() => {            
    this.props.navigator.push({            
      component: Search,        
    })    
  });
}

3、Cannot find entry file index.ios.js in any of the roots:["/Users/xxx/Desktop/AwesomeProject"]

该问题一般都是因为当前已经开启某个项目的react-native server,所以只要关闭然后重新运行新项目就可以了。