I am working with the example project with tab navigation and have made a ListView using react-native-elements.
I am trying to figure out how to open up an item in the list using the onPress
method. Do I add another route/screen in the RootStackNavigator
This is what the HomeScreen is.
export default class HomeScreen extends React.Component {
- static navigationOptions = {
2 header: null,
2 };
|
- render() {
2 return (
2 <View style={styles.container}>
2 <PostList />
2 </View>
2 );
2 }
|}
This is Post List - Following How to use the FlatList Component - React Native Basics
export class PostList extends React.Component {
- constructor(props) {
2 super(props);
2
- this.state = {
3 loading: false,
3 data: [],
3 page: 1,
3 seed: 1,
3 error: null,
3 refreshing: false
3 };
2 }
|
- componentDidMount() {
2 this.getPosts();
2 }
|
- getPosts = () => {
2 const { page, seed } = this.state;
2 const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
| this.setState({ loading: true });
|
| fetch(url)
| .then(res => res.json())
- .then(res => {
- this.setState({
3 data: page === 1 ? res.results : [...this.state.data, ...res.results],
3 error: res.error || null,
3 loading: false,
3 refreshing: false
3 });
2 })
- .catch(error => {
2 this.setState({ error, loading: false });
2 });
| };
- handleRefresh = () => {
- this.setState({
2 page: 1,
2 seed: this.state.seed + 1,
2 refreshing: true
2 }, () => {
2 this.getPosts();
2 });
| };
- handlePostPress = () => {
| console.log(this.props);
| const { navigate } = this.props.navigation;
| console.log(navigate);
| };
- render() {
| return (
| <List containerStyle={{borderTopWidth: 0, borderBottomWidth: 0}}>
| <FlatList
| data={this.state.data}
- renderItem={ ({item}) => (
2 <ListItem
2 roundAvatar
2 hideChevron
2 title={`${item.name.first} ${item.name.last}`}
2 subtitle={item.email}
2 avatar={{ uri: item.picture.thumbnail }}
2 containerStyle={{ borderBottomWidth: 0 }}
2 onPress={this.handlePostPress}
2 />
2 )}
| keyExtractor={item => item.email}
| onRefresh={this.handleRefresh}
| refreshing={this.state.refreshing}
| />
| </List>
| );
| }
}
How can I get the onPress handler to navigate to a sub-navigation using this example apps “flow”? Any tips?