将用户导航到listitem上的New Screen，然后单击React native [英] Navigate user to New Screen on listitem click React native
问题描述
我正在尝试在用户单击列表项时将用户导航到下一个屏幕.我试图在其中使用Navigator，我是新手，有Redux和Flux这两种不同的体系结构，因为我的反应不是很好，所以我对在那里的工作不感到困惑.我们可以使用 Navigator和操作来导航用户.这是我的课:-
I am trying to navigate user to next screen when user click on list item. I am trying to make use of Navigator in this , i am newbie to react , there is Redux and Flux two different architecture as i am not every much good in react so i am little confuse with there working.We can navigate user by using Navigator and also by using Action. Here is my class :-
我得到的错误是:-未定义不是函数(正在评估'_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天，我正在寻找解决方案，我只想在单击列表项时打开一个新屏幕.任何人都可以告诉我该怎么做.如果有人让我知道导航到下一个屏幕的方式，我将不胜感激.
i am trying my level best to solve this , its almost 3 days today i am looking for solution that how i can do this , i just want to open a new Screen on click on list item. Can any one tell me how to do that.I will be very Grateful if some one let me know the way to navigate to next screen.
我的错误的屏幕截图:-
ScreenShot of my Error :-
谢谢！
推荐答案
使用反应导航"应该可以帮助您解决问题.
Using "React Navigation" should help you to do the trick.
有关更多信息，您可以在这里找到: https://reactnavigation.org
For more information, you can find it here: https://reactnavigation.org
干杯
======更新======
====== UPDATE ======
我认为您设置今天"组件的方式不正确，并且您的问题还不清楚，我花了一些时间才了解您想要做什么.
I believe the way you set up the Today component is incorrect, and also your question is unclear, it took me a while to understand what you're wanting to do.
无论如何，Today组件如果要从其打开详细信息屏幕，则应为StackNavigator，它将控制2个屏幕(ListScreen和DetailScreen):
Anyway, Today component should be a StackNavigator if you want to open a detail screen from it, and it will control 2 screens (ListScreen and DetailScreen):
const TodayView = StackNavigator({
List: {
screen: ListScreen,
},
Detail: {
screen: DetailScreen,
},
});
然后按如下所示设置屏幕:
Then setup your screens like this:
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"，您可能想看看它:
There is an example calling "StacksInTabs" in their Github repo, that you might want to take a look at it: https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/StacksInTabs.js
干杯
这篇关于将用户导航到listitem上的New Screen，然后单击React native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
