Question

如何在React Native中将页面导航到另一页面。在这里，我想导航至另一项活动，当我单击列表项时，将导航至另一页。您可以在

下查看我的代码

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;

从代码中，我猜您正在使用反应导航。您可以通过documentation进行详细了解

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

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

1 个答案: