单击列表项时如何导航到另一个活动

Question

如何在本机反应中导航一个页面到另一个页面。在这里我想导航到我的活动到另一个活动，当我单击列表项时，这将导航到另一个页面您可以在下面查看我的代码

import React, {Component} from 'react';
import { StyleSheet, View,  AppRegistry,} from 'react-native';
import { List, ListItem, Icon, Text } from 'native-base';
import { StackNavigator } from 'react-navigation';
import Adjective        from './Topic/Adjective';

class BasicFlatList extends Component {

    onSourcesSetting = () => {
        this.props.navigation.navigate('Adj');
    }

     render(){

      return(
        <List>
            <ListItem 
            button
            noBorder
            onPress={() => this.onSourcesSetting}>
            <Text>Adjective</Text>
            </ListItem>

        </List>
        );
    }

}

const App = StackNavigator({
    Adj: Adjective, 


  });

export default BasicFlatList;

Answer 1

您可以创建一个新屏幕（组件）并将该路由的名称和其他所需参数传递给函数。

import React, {Component} from 'react';
import { StyleSheet, View,  AppRegistry,} from 'react-native';
import { List, ListItem, Icon, Text } from 'native-base';
import { StackNavigator } from 'react-navigation';
import Adjective        from './Topic/Adjective';

  class BasicFlatList extends Component {

    onSourcesSetting = () => {
        this.props.navigation.navigate('AdjDetail', {
          // require params(maybe adj id)
        });
    }

     render(){

      return(
        <List>
            <ListItem 
            button
            noBorder
            onPress={() => this.onSourcesSetting}>
            <Text>Adjective</Text>
            </ListItem>

        </List>
        );
    }

}

class AdjectiveDetail extends React.Component {
 render() {
   console.log("props", this.props);
   return null;
 }
}

const App = StackNavigator({
    Adj: Adjective, 
    AdjDetail: AdjectionDetail

  });

export default BasicFlatList;

从代码中我猜你正在使用 react-navigation。您可以通过documentation了解更多详情

P.S：react-native 创建一个单独的活动，整个应用程序在单个活动中运行，没有像在 android 中那样从一个活动导航到另一个活动。