标签：nat nop highlight this nbsp active styles code card
在父组件中引入子组件，这个时候通常直接使用 onPress 的跳转就会不起作用
正确的处理方法是，在组件中封装一个点击事件，然后在父组件中执行跳转的函数
正常的跳转方法是：
import React from ‘react‘; import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, } from ‘react-native‘; // navigator import { StackNavigator } from ‘react-navigation‘; // 引入组件 Cell import CommonCell from ‘./commonCell‘; export default class More extends React.Component { // 顶部导航 static navigationOptions = ({ navigation }) => { const { navigate } = navigation; return { title: ‘更多‘, tabBarLabel: ‘更多‘, mode: ‘card‘, headerMode: ‘float‘, activeTintColor: ‘#000000‘, }; }; render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> <ScrollView> <View style={{marginTop: 14}}> <TouchableOpacity onPress={() => navigate(‘ShakeMode‘)} // 跳转 > <Text>点击震动手机</Text> </TouchableOpacity> </View> </ScrollView> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#e8e8e8‘, }, });
如果引入了组件，在组件中要跳转，方法如下
父组件：
import React from ‘react‘; import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, } from ‘react-native‘; // navigator import { StackNavigator } from ‘react-navigation‘; // 引入组件 Cell import CommonCell from ‘./commonCell‘; export default class More extends React.Component { // 顶部导航 static navigationOptions = ({ navigation }) => { const { navigate } = navigation; return { title: ‘更多‘, }; }; render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> <ScrollView> <View style={{marginTop: 14}} > <CommonCell nextClick={() => {this.endClick()}} title="点击震动手机" /> </View> </ScrollView> </View> ); } // 控制跳转 endClick() { const { navigate } = this.props.navigation; navigate(‘ShakeMode‘) } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#e8e8e8‘, }, });
引入组件
CommonCell，并将方法 nextClick = endClick，
endClick执行跳转的方法，
nextClick 传递给子组件
子组件
render() {
return (
<TouchableOpacity
onPress={this.props.nextClick}
>
<View style={styles.container}>
{/**左边**/}
<Text style={{marginLeft: 10}}>{this.props.title}</Text>
{/**右边 返回什么需要判断 **/}
{this.renderRightView()}
</View>
</TouchableOpacity>
);
}
这样就可以实现跳转了
标签：nat nop highlight this nbsp active styles code card
原文地址：http://www.cnblogs.com/haonanZhang/p/7571656.html
