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，所以只要关闭然后重新运行新项目就可以了。
