что мне нужно сделать, чтобы все 4 мои кнопки открывали новую страницу - PullRequest
Новая
       17

что мне нужно сделать, чтобы все 4 мои кнопки открывали новую страницу

0 голосов
/ 29 декабря 2018

Я довольно новичок, чтобы реагировать, так что извините, если вопрос плохо описан, у меня есть 4 кнопки, и я хочу, чтобы для каждой из них открывалась отдельная страница. Я могу связать одну функцию открытия новой страницы со всеми четырьмя кнопками, но я не могу связать однуФункция одной кнопки только для кнопки «группа» 

import React, { Component } from 'react';
import { FlatList, Button, StyleSheet, Text, View } from 'react-native';

import TrainingListItem from '../components/TrainingListItem'

export default class TrainingScreen extends Component {
    render() {
      return (
        
        <View style={styles.container}>
          <FlatList contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}} data={[
            
              { "_id": 1, name: "Disziplin"},
              { "_id": 2, name: "Selbstbewusstsein"},
              { "_id": 3, name: "Selbstwertgefühl"},
              { "_id": 4, name: "Vertrauen"},
              
          ]}
          keyExtractor={item => item.name} 
          renderItem={
            ({item}) => (
             <TrainingListItem training={item.name} onPress={(id) => {}}/>
            ) 
          }
          ItemSeparatorComponent={() => <View style={styles.listSeparator}/>}/>
        </View>
      );
    }
  }
  


  const styles = StyleSheet.create({
    container: {
      padding: 30,
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    listView: {
      flex: 1,
      justifyContent: 'center',
    },
    listSeparator: {
      padding: 30
    }
  });

1 Ответ

0 голосов
/ 30 декабря 2018

Хорошо, я не так много понял, но попробую.Вы хотите открыть разные страницы с каждой кнопкой?Если это так, используйте для этого свое свойство name, просто назовите свою страницу с тем же именем, которое у нее есть в кнопке. Таким образом, вы можете сделать это в renderItem 

renderItem={
            ({item}) => (
             <TrainingListItem training={item.name} onPress={(id) => {this.gotopage(item.name)}}/>
            ) 
          }

и обработать эту функцию следующим образом: 

gotopage(NameOfPage){
//Navigate to page with name NameOfPage
//with react-navigation it will be :
 this.props.navigation.navigate(NameOfPage)
}

Это то, что вы хотите сделать?

...