android - 将用户导航到列表项上的新屏幕单击 React native

Question

我试图在用户点击列表项时将用户导航到下一个屏幕。我正在尝试在此使用 Navigator，我是 React 的新手，有 Redux 和 Flux 两种不同的架构，因为我的 React 不是很好，所以我对那里的工作有点困惑。我们可以使用 Navigator 和 Action 来导航用户。这是我的课:-

我得到的错误是:- undefined is not a function(evaluating '_this4.goDetailPage(rowData)')

Today.js

    import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
} from 'react-native';
import {FeedStack} from './movielistdeatilrouter';

export default class TodayView extends Component {
 constructor(props , context) {
      super(props , context);
    }
   render() {
        return (
<FeedStack />
        );
    }
 }

movielistdeatilrouter.js : -

import React from 'react';
import {StackNavigator } from 'react-navigation';
import MovieDeatilScreen from './MovieDeatilScreen';
import Movielisting from './movielisting';
export const FeedStack = StackNavigator({
  Movielisting: {
    screen: Movielisting,
    navigationOptions: {
      title: 'Movielisting',
    },
  },
  MovieDeatilScreen: {
    screen: MovieDeatilScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'MovieDeatilScreen',
    }),
  },
});

movielistiing.js :-

import React, { Component } from 'react';
import { StatusBar } from 'react-native'
import { StackNavigator } from 'react-navigation';
import { NavigationActions } from 'react-navigation';
import { Actions, ActionConst } from 'react-native-router-flux';
import home  from '../images/home.png';
import MovieDeatilScreen from './MovieDeatilScreen'
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
import {
  StyleSheet,
  Text,
  Image,
  View,
  AsyncStorage,
  TouchableOpacity,
  TouchableHighlight,
  Dimensions,
  ListView
} from 'react-native';
const uri = 'http://csswrap.com/wp-content/uploads/2015/03/showmenu.png';
export default class Movielisting extends Component {

 constructor(props) {
     super(props);
     var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     this.state = {
       moviesData: ds.cloneWithRows([]),
     };
   }

   componentDidMount() {
       this.fetchMoviesData();
     }
      fetchMoviesData() {
          var url = 'http://api.themoviedb.org/3/movie/now_playing?api_key=17e62b78e65bd6b35f038505c1eec409';
          fetch(url)
            .then(response => response.json())
            .then(jsonData => {
              this.setState({
                moviesData: this.state.moviesData.cloneWithRows(jsonData.results),

              });
            })
          .catch( error => console.log('Error fetching: ' + error) );
        }
  render() {
        return (
                <View style={styles.container}>

                    <ListView
                      dataSource={this.state.moviesData}
                            renderRow={this.renderRow}
                            enableEmptySections={true}
                             style={styles.ListViewcontainer}
                          />
                    </View>
        );
    }
    renderRow(rowData){
            return (
              <View style={styles.thumb} >
              <TouchableOpacity  onPress={() => this.goDeatilPage(rowData)}>
                <Image
                  source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
                  resizeMode="cover"
                  style={styles.img} />
                  <Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
              </TouchableOpacity>
              </View>

            );
          }
goDeatilPage = (rowData) => {
   alert('hi');
   AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
       this.props.navigation.navigate('MovieDeatilScreen');
     };
}
const styles = StyleSheet.create({
  container: {
  position:'relative',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },action: {
                                        flex: 0.4,
                                    },thumb: {
                                          backgroundColor: '#ffffff',
                                          marginBottom: 5,
                                          elevation: 1
                                        },
                                        img: {
                                          height: 300
                                        },
                                        txt: {
                                          margin: 10,
                                          fontSize: 16,
                                          textAlign: 'left'
                                        },ListViewcontainer:{
                                         marginTop:50,
                                          bottom: 50,
                                        }
});

Index.android.js :-

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  StatusBar,
  View
} from 'react-native';
import App from './app';
import DrawerMenu from './Drawer/drawer-toolbar-android';
import BookmarkView from './Pages/bookmark';
import CalendarView from './Pages/calendar';
import ClientView from './Pages/client';
import InfoView from './Pages/info';
import SettingsView from './Pages/setting';
import { DrawerNavigator, StackNavigator } from 'react-navigation';


const stackNavigator = StackNavigator({
  Info: { screen: InfoView },
  Settings: {screen: SettingsView },
  Bookmark: {screen: BookmarkView },
  Calendar: {screen: CalendarView},
  Client: {screen: ClientView},
}, {
  headerMode: 'none'
});

const easyRNRoute = DrawerNavigator({
  Home: {
    screen: App,
  },
  Stack: {
    screen: stackNavigator
  }
}, {
  contentComponent: DrawerMenu,
  contentOptions: {
    activeTintColor: '#e91e63',
    style: {
      flex: 1,
      paddingTop: 15,
    }
  }
});

AppRegistry.registerComponent('flightbot', () => easyRNRoute);

App.js 类 :-

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

import { COLOR, ThemeProvider } from 'react-native-material-ui';
import { Toolbar, BottomNavigation, Icon } from 'react-native-material-ui';
import Container from './Container';

import { TabRouter } from 'react-navigation';

import TodayView from './Contents/today';
import ProfileView from './Contents/profile';
import MapView from './Contents/map';
import ChatView from './Contents/chat';

const uiTheme = {
  palette: {
    primaryColor: COLOR.green500,
    accentColor: COLOR.pink500,
  },
  toolbar: {
    container: {
      height: 70,
      paddingTop: 20
    }
  }
}

const TabRoute = TabRouter({
  Today: { screen: TodayView },
  Profile: { screen: ProfileView },
  Map: { screen: MapView },
  Chat: {screen: ChatView}
  }, {
    initialRouteName: 'Today',
  }
);

class TabContentNavigator extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      active: props.value.active,
    };
  }

  //this method will not get called first time
  componentWillReceiveProps(newProps){
    this.setState({
      active: newProps.value.active,
    }); 
  }

  render() {
    const Component = TabRoute.getComponentForRouteName(this.state.active);
    return <Component/>;
  }
}

export default class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      active: 'Today',
    };
  }

  static navigationOptions = {
    title: 'Menu',
  };

  navigate() {
    this.props.navigation.navigate('DrawerOpen'); // open drawer
  }

  render() {
    return (
      <ThemeProvider uiTheme={uiTheme}>
        <Container>
          <StatusBar backgroundColor="rgba(0, 0, 0, 0.2)" translucent />

          <Toolbar
            leftElement="menu"
            centerElement={this.state.active}
            onLeftElementPress={() => this.navigate()}
          />

          <TabContentNavigator value={this.state} key={this.state} />

          <BottomNavigation active={this.state.active}
            hidden={false}
            style={{ container: { position: 'absolute', bottom: 0, left: 0, right: 0 } }}
          >
            <BottomNavigation.Action
              key="Today"
              icon="today"
              label="Today"
              onPress={() => this.setState({ active: 'Today' })}
            />
            <BottomNavigation.Action
              key="Profile"
              icon="person"
              label="Profile"
              onPress={() => {
                this.setState({ active: 'Profile' });
              }}
            />
            <BottomNavigation.Action
              key="Map"
              icon="map"
              label="Map"
              onPress={() => this.setState({ active: 'Map' })}
            />
            <BottomNavigation.Action
              key="Chat"
              icon="chat"
              label="Chat"
              onPress={() => this.setState({ active: 'Chat' })}
            />
          </BottomNavigation>

        </Container>
      </ThemeProvider>
    );
  }
}

我正在尽力解决这个问题，今天已经快 3 天了，我正在寻找如何解决这个问题的解决方案，我只想在单击列表项时打开一个新屏幕。谁能告诉我该怎么做。如果有人告诉我如何导航到下一个屏幕，我将不胜感激。

我的错误截图:-

谢谢!!!

Answer 1

使用“React Navigation”应该可以帮助您做到这一点。

有关更多信息，您可以在这里找到:https://reactnavigation.org

干杯，

======更新======

我认为您设置 Today 组件的方式不正确，而且您的问题也不清楚，我花了一段时间才明白您想要做什么。

无论如何，如果您想从 Today 组件打开一个详细信息屏幕，它应该是一个 StackNavigator，它将控制 2 个屏幕(ListScreen 和 DetailScreen):

const TodayView = StackNavigator({
  List: {
    screen: ListScreen,
  },
  Detail: {
    screen: DetailScreen,
  },
});

然后像这样设置你的屏幕:

class ListScreen extends Component {
  static navigationOptions = {
    title: 'List',
  }

  constructor(props , context) {
    super(props , context);
    this.goToDetailScreen = this.goToDetailScreen.bind(this);
  }

  goToDetailScreen() {
    this.props.navigation.navigate('Detail');
  }

  render() {
    return (
      <TouchableOpacity onPress={() => this.goToDetailScreen()}>
        <Text>GO TO DETAIL</Text>
      </TouchableOpacity>
    );
  }
}

class DetailScreen extends Component {
  static navigationOptions = {
    title: 'Detail',
  }

  render() {
    return (
      <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
        <Text>BACK TO LIST SCREEN</Text>
      </TouchableOpacity>
    );
  }
}

在他们的 Github 存储库中有一个调用“StacksInTabs”的示例，您可能想看看它:https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/StacksInTabs.js

干杯，