將用戶導航到listitem上的新屏幕點擊React native

我是當用戶點擊列表項時，試圖將用戶導航到下一個屏幕。我試圖在這個使用導航器，我是新手反應，有Redux和Flux兩種不同的架構，因爲我並不是每一個好反應，所以我有點混淆與那裏工作。我們可以導航用戶使用導航器以及使用動作。這裏是我的類： -將用戶導航到listitem上的新屏幕點擊React native

錯誤我得到的是： - 不確定是不是（評估 '_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天，今天我正在尋找解決方案，我可以如何o這個，我只想打開一個新的屏幕點擊列表項。任何人都可以告訴我該怎麼做。如果有人讓我知道如何導航到下一個屏幕，我將非常感激。

截圖我的錯誤的： -

謝謝！

來源

2017-06-14 sid

使用「反應導航」應該可以幫助你做到這一點。

欲瞭解更多信息，你可以在這裏找到：https://reactnavigation.org

乾杯，

====== UPDATE ======

我相信你的方式成立今天的組件是不正確的，而且你的問題還不清楚，我花了一段時間才明白你想要做什麼。

不管怎麼說，今天分量應該是一個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

車ERS，

來源

2017-06-14 08:52:55

您好@Goon，感謝您的答覆人，是的，我有前面看到，上面的類是在我的TabRouter下，當我嘗試聲明* const {navigate} = this.props.navigation; *它給了我錯誤，因爲Undefined不是一個對象（評估this.props。導航.navigate），讓我發佈我的剩餘課程，我正在學習從一個鏈接，並試着站在流程下，請看看我更新的問題。讓我在上面的課堂中如何使用這種方法。謝謝 – sid

只是更新答案，讓我知道它是否工作@sid :) –

嘿@Goon，我有點困惑問題是在Today.js類我不能使用onpress事件內部RenderRow函數調用導航器，我也像上面提到的那樣更新了我的App.js文件，但仍然無法在單擊ListItem時導航到Detail屏幕。 – sid

最後，它的工作原理，這是怎麼了我這樣做下面的代碼更改。： -

<View style={styles.container}> 
        <ListView 
         dataSource={this.state.moviesData} 
          renderRow={this.renderRow.bind(this)} 
          enableEmptySections={true} 
          style={styles.ListViewcontainer} 
          /> 
        </View>

我只是說.bind（這）函數來renderRow。

休息是相同的： -

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'); 
    }

感謝@Goon你的時候，我非常欣賞你的努力。謝謝兄弟。

來源

2017-06-15 05:26:09 sid

告訴你，男人。我確實試圖告訴你在第一次檢查綁定功能：D –

很高興它可以幫助！ –

使用陣營導航的導航屏幕，這是非常易於使用，

創建3類反應本土

定義導航類 2.first屏幕 3.導航屏幕

1.Basic.js

import { 
    StackNavigator, 
} from 'react-navigation'; 

const BasicApp = StackNavigator({ 
    Main: {screen: Movielistiing}, 
    Detail: {screen: Movielistdeatilrouter}, 
}); 
module.exports = BasicApp;

2.Movielistiing.js

class Movielistiing extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <Button 
     title="Go to movie detail" 
     onPress={() => 
      navigate('Detail', { name: 'Jane' }) 
     } 
     /> 
    ); 
    } 
}

3.Movielistdeatilrouter.js

class Movielistdeatilrouter extends React.Component { 
    static navigationOptions = ({navigation}) => ({ 
    title: navigation.state.params.name, 
    }); 
    render() { 
    const { goBack } = this.props.navigation; 
    return (
     <Button 
     title="Go back" 
     onPress={() => goBack()} 
     /> 
    ); 
    } 
}

來源

2017-06-15 05:55:00

將用戶導航到listitem上的新屏幕點擊React native

回答

相關問題