Question

我确实在其他几个地方找到了这个问题，但是在提供的任何帮助下，我仍然无法解决该问题。到目前为止，我获得了大部分代码-

https://medium.com/@austinhale/building-a-mobile-app-in-10-days-with-react-native-c2a7a524c6b4

有些API已过时，但是其中大多数我都可以用新版本替换-我更改的对此问题可能值得注意的API之一是stackNavigator-> createStackNavigator

我的代码如下：

Apps.js

import React, { Component } from 'react';
import {
    FlatList,
    StatusBar,
    StyleSheet,
    Text,
    View
} from 'react-native';

import AppItem from './AppItem';

export default class Apps extends Component {
    constructor(props) {
        super(props);
        this.state = {
            apps: [
                {
                    id: 1,
                    title: 'Good Business',
                    description: 'Make millions investing in mindtree minds',
                    thumbnail: 'https://img12.androidappsapk.co/300/f/5/1/com.nse.bse.sharemarketapp.png'
                },
                {
                    id: 2,
                    title: 'Troll WhatsApp SOS ONLY',
                    description: 'Have a laugh by reading all the comments in the group chat made by your coworkers',
                    thumbnail: 'http://icons.iconarchive.com/icons/dtafalonso/android-l/256/WhatsApp-icon.png'
                }

            ]
        }
    }

    _renderItem = ({ item }) => (
        <AppItem
            id={item.id}
            title={item.title}
            description={item.description}
            thumbnail={item.thumbnail}
        />
    );

    _keyExtractor = (item, index) => item.id.toString();

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    barStyle="light-content"
                />
                <FlatList
                    data={this.state.apps}
                    keyExtractor={this._keyExtractor}
                    renderItem={this._renderItem}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    }
});

router.js

import React, { Component } from 'react';
import { Dimensions, Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';

import Apps from './screens/Apps';
import Gallery from './screens/Gallery';
import Garage from './screens/Garage';
import News from './screens/News';
import Support from './screens/Support';
import ViewApp from './screens/ViewApp';

let screen = Dimensions.get('window');

export const Tabs = createBottomTabNavigator({
    'Apps': {
        screen: Apps,
        navigationOptions: {
            tabBarLabel: 'Apps',
            tabBarIcon: ({ tintColor }) => <Icon raised name="ios-apps-outline" type="ionicon" size={28} color={tintColor} />
        },
    },
    'News': {
        screen: News,
        navigationOptions: {
            tabBarLabel: 'News',
            tabBarIcon: ({ tintColor }) => <Icon raised name="newspaper-o" type="font-awesome" size={28} color={tintColor} />
        },
    },
    'Garage': {
        screen: Garage,
        navigationOptions: {
            tabBarLabel: 'Garage',
            tabBarIcon: ({ tintColor }) => <Icon raised name="garage" type="material-community" size={28} color={tintColor} />
        },
    },
    'Gallery': {
        screen: Gallery,
        navigationOptions: {
            tabBarLabel: 'Gallery',
            tabBarIcon: ({ tintColor }) => <Icon raised name="picture" type="simple-line-icon" size={28} color={tintColor} />
        },
    },
    'Support': {
        screen: Support,
        navigationOptions: {
            tabBarLabel: 'Support',
            tabBarIcon: ({ tintColor }) => <Icon raised name="ios-person-outline" type="ionicon" size={28} color={tintColor} />
        },
    },
});

export const AppsStack = createStackNavigator({
    Apps: {
        screen: Apps,
        navigationOptions: ({ navigation }) => ({
            header: null,
        }),
    },
    ViewApp: {
        screen: ViewApp,
        navigationOptions: ({ navigation }) => ({
            header: null,
            tabBarVisible: false,
            gesturesEnabled: false
        }),
    },
});

export const createRootNavigator = () => {
    return createStackNavigator(
        {
            AppsStack: {
                screen: AppsStack,
                navigationOptions: {
                    gesturesEnabled: false
                }
            },
            Tabs: {
                screen: Tabs,
                navigationOptions: {
                    gesturesEnabled: false
                }
            }
        },
        {
            headerMode: "none",
            mode: "modal"
        }
    );
};

AppItem.js

import React, { Component } from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    Text,
    Image,
    View
} from 'react-native';

import { Icon } from 'react-native-elements';
import { ViewApp } from './ViewApp';

export default class AppItem extends Component {

    _onViewApp = () => {
        let id = this.props.id;
        this.props.navigation.navigate('ViewApp', { id: id })
    }

    render() {

        return (
            <TouchableOpacity onPress={this._onViewApp}>
                <View style={styles.rowContainer}>
                    <Image source={{ uri: this.props.thumbnail }}
                        style={styles.thumbnail}
                        resizeMode="contain" />
                    <View style={styles.rowText}>
                        <Text style={styles.title} numberOfLines={2} ellipsizeMode={'tail'}>
                            {this.props.title}
                        </Text>
                        <Text style={styles.description} numberOfLines={2} ellipsizeMode={'tail'}>
                            {this.props.description}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    rowContainer: {
        flexDirection: 'row',
        backgroundColor: '#FFF',
        height: 100,
        padding: 10,
        marginRight: 10,
        marginLeft: 10,
        marginTop: 15,
        borderRadius: 4,
        shadowOffset: { width: 1, height: 1, },
        shadowColor: '#CCC',
        shadowOpacity: 1.0,
        shadowRadius: 1
    },
    title: {
        paddingLeft: 10,
        paddingTop: 5,
        fontSize: 16,
        fontWeight: 'bold',
        color: '#777'
    },
    description: {
        paddingLeft: 10,
        marginTop: 5,
        fontSize: 14,
        color: '#777'
    },
    thumbnail: {
        flex: 1,
        height: undefined,
        width: undefined
    },
    rowText: {
        flex: 4,
        flexDirection: 'column'
    }
});

Answer 1

您可以在AppItem.js中更改您的onPress功能，如下所示。在onPress onPress = {（）=> this._onViewApp（）} 中使用箭头功能。因为Arrow函数不会创建上下文“ this”。它指的是包装它的组件的上下文。有关 lexical this 的信息，请参考此Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?

import { Icon } from 'react-native-elements';
import { ViewApp } from './ViewApp';

export default class AppItem extends Component {

    _onViewApp(){
        let id = this.props.id;
        this.props.navigation.navigate('ViewApp', { id: id })
    }

    render() {

        return (
            <TouchableOpacity onPress={() => this._onViewApp()}>
                <View style={styles.rowContainer}>
                    <Image source={{ uri: this.props.thumbnail }}
                        style={styles.thumbnail}
                        resizeMode="contain" />
                    <View style={styles.rowText}>
                        <Text style={styles.title} numberOfLines={2} ellipsizeMode={'tail'}>
                            {this.props.title}
                        </Text>
                        <Text style={styles.description} numberOfLines={2} ellipsizeMode={'tail'}>
                            {this.props.description}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
}

Answer 2

我想跟每个遇到相同问题的人进行跟进。我只是包含了withNavigation from 'react-native-navigation';，并像这样export default withNavigation(AppItem);一样导出到了组件的末尾。

未定义不是对象（评估'this.props.navigation.navigate'）_onViewApp ln 17

2 个答案: