Не определено this.props.navigation.navigate ('Form') в собственной кнопке React

Question

В последнее время я работаю над проектом RN.У меня есть проблема здесь.Итак, у меня есть 2 экрана, которые называются HomeScreen и FormScreen.В HomeScreen я создал новый файл JS для отображения некоторых данных, которые я взял из API, который называется ListLab.В HomeScreen я показал данные, используя массив.Все, что касается представления, cardview, cardcontent, находится внутри ListLab.js, который автоматически, если я хочу добавить кнопку удаления и обновления, должен поместить его в файл ListLab.js.Кнопка «Удалить» работала хорошо, но кнопка «Обновить», созданная мной для перехода к FormScreen, не работает. Она отображает ошибку «Не определено (this.props.navigation.navigate)».Но когда я помещаю эту кнопку и ее навигацию в HomeScreen, она успешно работает.Я не знаю, какой метод навигации мне нужен.Пожалуйста, помогите мне решить эту проблему.

Вот мой код App.js:

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView,ScrollView, Dimensions, Image } from 'react-native';
import { createDrawerNavigator, DrawerItems, createAppContainer } from 'react-navigation';
// import HomeScreen from './screens/HomeScreen';
// import FormScreen from './screens/FormScreen';
// import SigninScreen from './screens/SigninScreen';
import HomeScreen from './screens/laboran/HomeScreen';
import FormScreen from './screens/laboran/FormScreen';
const { width } = Dimensions.get('window');
export default class App extends React.Component{
  render() {
    return (
      <Apps/>
    );
  }
}

const CustomDrawerComponent = (props) => (
  <SafeAreaView style={{ flex:1 }}>
    <View style={{height:150, backgroundColor: 'white', alignItems :'center', justifyContent:'center'}}>
      <Image source={require('./assets/up2.png')} style={{height:50, width:50,borderRadius:35 }}/>
    </View>
    <ScrollView>
      <DrawerItems {...props}/>
    </ScrollView>
  </SafeAreaView>
) 

const AppDrawerNavigator = createDrawerNavigator({
  // Login:SigninScreen,
  Home:HomeScreen,
  Form:FormScreen,
}, {
  contentComponent: CustomDrawerComponent,
  drawerWidth: width,
  contentOptions:{
    activeTintColor:'orange'
  }
})

const Apps = createAppContainer(AppDrawerNavigator)

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

Вот мой код HomeScreen.js:

import React , { Component } from 'react';
import {
    StatusBar,
    ScrollView,
    View,
    Text,
    StyleSheet
} from 'react-native';
import { Header, Left, Right, Icon } from 'native-base';
import ajax from '../../fetchDB/fetchDataPinjam';
import Button from 'react-native-button';
import ListLab from '../../src/component/ListLab';
class HomeScreen extends Component {

    state = {
        pinjams: [],
        currentUser: null
    }
    async componentDidMount(){
        const pinjams = await ajax.fetchDataPinjam();
        this.setState({pinjams});
    }

    static navigationOptions = {
        drawerIcon : ({tintColor})=>(
            <Icon name="home" style={{ fontSize: 24, color: tintColor }}/>
        )
    }
    render() {
        // const { currentUser } = this.state
        return (
            <View style={styles.container}>
                <StatusBar hidden />
                <Header style={{backgroundColor:'orange'}} centerComponent={{ text: 'Halaman Utama', style: { color: '#ffffff' } }}>
                    <Left style={{justifyContent:"flex-start",flex:1,marginTop:5}}>
                        <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()} />
                    </Left>
                </Header>
                <View style={{justifyContent:"center", paddingTop:10, paddingBottom:10}} >
                    <ScrollView>
                    <Text>Aplikasi Laboran</Text>
                    {
                        this.state.pinjams.length > 0
                        ? <ListLab pinjams={this.state.pinjams} />
                        : <Text>Tidak Ada Peminjaman</Text>

                    }
                    </ScrollView>
                </View>
            </View>
        );    
    }
}
export default HomeScreen;

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'white'
    },
  });

Вот мой код ListLab.js:

import React, { Component } from 'react';
import {  View, Text, StyleSheet, StatusBar} from 'react-native';
import PropTypes from 'prop-types';
import { Card, CardTitle, CardContent, CardImage } from 'react-native-material-cards'
import Button from 'react-native-button';
class ListLab extends Component {
  static propTypes = {
    pinjams: PropTypes.array.isRequired
}; 
  _OnButtonPress(no_pengajuan) {
    Alert.alert(no_pengajuan.toString());
  }
  handleDelete(id){
    let url = "URL/api/pinjams/"+id ;
    let data = this.state;
    fetch(url,{
        method:'DELETE',
        headers:{
          "Content-Type" : "application/json",
          "Accept" : "application/json"
      },
      body: JSON.stringify(data)
    })
    .then((result) => {
        result.json().then((resp) => {
            console.warn("resp", resp)
            alert("Data is Removed")
        })
    })
}

  moveToForm = () =>{
    this.props.navigation.navigate('Form');
  }

  render() {
    return (
      <View style={styles.pinjamList}>
        <StatusBar hidden />
        {this.props.pinjams.map((pinjam) => {
            return (
                <View key={pinjam.id}>
                  {/* Baru nambah data */}
                  <Card >
                  <CardImage 
                    source={{uri: 'http://www.rset.edu.in/pages/uploads/images/computerLab-img1.jpg'}} 
                    title={pinjam.lab } 
                  />
                  <CardTitle 
                    title={ pinjam.ketua_kegiatan }
                    subtitle={ pinjam.keperluan }
                  />
                  <CardContent><Text>{ pinjam.tanggal_mulai} - {pinjam.tanggal_selesai }</Text></CardContent>
                </Card>
                <CardContent><Text>{ pinjam.jam_mulai } - {pinjam.jam_selesai }</Text></CardContent>
                  <Button
                    style={{fontSize:20, color:'red'}}
                    styleDisabled={{color:'grey'}}
                    onPress ={()=>{this.handleDelete(pinjam.id)}}
                    > {"\n"} Delete
                </Button>
                <Button
                    style={{fontSize:20, color:'green'}}
                    styleDisabled={{color:'grey'}}
                    onPress ={() => this.moveToForm()}
                    > {"\n"} Update
                </Button>
                </View>
            )
        })}

      </View>
    );
  }

}
import { form } from 'tcomb-form-native/lib';
export default ListLab;
const styles = StyleSheet.create({
    pinjamList: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around',
    },
    pinjamtext: {
        fontSize: 14,
        fontWeight: 'bold',
        textAlign: 'center',
    }
});

Вот мой код FormScreen.js:

import React , { Component } from 'react';
import {
    ScrollView,
    View,
    Text,
    StyleSheet,
    StatusBar
} from 'react-native';
import { Header, Left, Right, Icon, Footer, Label} from 'native-base';
import Button from 'react-native-button';
import t from 'tcomb-form-native';
import { Dropdown } from 'react-native-material-dropdown';
import { TextField }  from 'react-native-material-textfield';
import DatePicker from 'react-native-datepicker';
import moment from 'moment';


class FormScreens extends Component {
    static navigationOptions = {
        drawerIcon : ({tintColor})=>(
            <Icon name="paper" style={{ fontSize: 24, color: tintColor }}/>
        )
     }
    constructor(){
        super();
        this.state = {
        ketua_kegiatan: '',
        lab: '',
        level: '',
        tanggal_mulai: '',
        tanggal_selesai: '',
        jam_mulai: '',
        jam_selesai: '',
        daftar_nama: '',
        keperluan: '',
        kontak_ketua:'',
        dosen_pembina: '',
        app_laboran: '',
        app_kalab: '',
        app_kajur: '',
        app_pudir: '',
        }
    }
    submit(id){
        let url = "http://URL/api/pinjams"+id;
        let data = this.state;
        fetch(url,{
            method:'PUT',
            headers:{
                "Content-Type" : "application/json",
                "Accept" : "application/json"
            },
            body: JSON.stringify(data)
        })
        .then((result) => {
            result.json().then((resp) => {
                console.warn("resp", resp)
                alert("Data is Updated")
            })
        })
    } 

    render() {
        let lab = [{
                value: '313',
            }, {
                value: '316',
            }, {
                value: '317',
            }, {
                value: '318',
            }, {
                value: '319',
            }, {
                value: '320',
            }, {
                value: '324',
            }, {
                value: '325',
            }, {
                value: '329',
            }, {
                value: '330',
            }, {
                value: '234',
            }, {
                value: '283',
            }, {
                value: '218',
            }, {
                value: '224',
            }, {
                value: '225',
            }, {
                value: '230',
            }, {
                value: '233',
            }, {
                value: '135',
            }, {
                value: '136',
            }, {
                value: '137',
            }, {
                value: 'Workshop',
            }, {
                value: 'Lab Bahasa',
          }];  
          let level = [{
                value: 1,
            }, {
                value: 2,
            }, {
                value: 3,
          }]; 

        return (
            //08-08-2019 (Ubah view menjadi ScrollView)
            <ScrollView style={styles.container}>
                <StatusBar hidden />
                <Header style={{backgroundColor:'orange', flex:0.8}}>
                    <Left style={{justifyContent:"flex-start",flex:1,marginTop:5}}>
                        <Icon name="menu" onPress={()=>this.props.navigation.openDrawer()} />
                    </Left>
                </Header>
                <View style={{padding:20}}>
                <Text style={{fontSize:20,textAlign: 'center',paddingLeft:20,fontWeight: 'bold'}}>{"\n"}Halaman Pengajuan</Text>
                <TextField
                    label = 'ID'
                    // value = {ketua_kegiatan}
                    onChangeText={ (id) => this.setState({ id }) }
                    // onChange={(data) => { this.setState({ketua_kegiatan:data.target.value}) }}
                    value = {this.state.id}
                />
                <TextField
                    label = 'ketua_kegiatan'
                    // value = {ketua_kegiatan}
                    onChangeText={ (ketua_kegiatan) => this.setState({ ketua_kegiatan }) }
                    // onChange={(data) => { this.setState({ketua_kegiatan:data.target.value}) }}
                    value = {this.state.ketua_kegiatan}
                />
               <Dropdown
                    label='Laboratorium'
                    data={lab}
                    onChangeText={ (lab) => this.setState({ lab }) }
                />

                <Dropdown
                    label='Level'
                    data={level}
                    onChangeText={ (level) => this.setState({ level }) }
                />
                <TextField
                    label = 'Tanggal Mulai'
                    // value = {tanggal_mulai}
                    onChangeText={ (tanggal_mulai) => this.setState({ tanggal_mulai }) }
                    // onChange={(data) => { this.setState({tanggal_mulai:data.target.value}) }}
                    value = {this.state.tanggal_mulai}
                />

                <TextField
                    label = 'Tanggal Selesai'
                    // value = {tanggal_selesai}
                    onChangeText={ (tanggal_selesai) => this.setState({ tanggal_selesai }) }
                    // onChange={(data) => { this.setState({tanggal_selesai:data.target.value}) }}
                    value = {this.state.tanggal_selesai}
                />

                <TextField
                    label = 'Jam Mulai'
                    // value = {jam_mulai}
                    onChangeText={ (jam_mulai) => this.setState({ jam_mulai }) }
                    // onChange={(data) => { this.setState({jam_mulai:data.target.value}) }}
                    value = {this.state.jam_mulai}
                />


                <TextField
                    label = 'Jam Selesai'
                    // value = {jam_selesai}
                    onChangeText={ (jam_selesai) => this.setState({ jam_selesai }) }
                    // onChange={(data) => { this.setState({jam_selesai:data.target.value}) }}
                    value = {this.state.jam_selesai}
                />

                <TextField
                    label = 'Keperluan'
                    // value = {keperluan}
                    onChangeText={ (keperluan) => this.setState({ keperluan }) }
                    // onChange={(data) => { this.setState({keperluan:data.target.value}) }}
                    value = {this.state.keperluan}
                />

                <TextField
                    label = 'Daftar Nama'
                    // value = {daftar_nama}
                    onChangeText={ (daftar_nama) => this.setState({ daftar_nama }) }
                    // onChange={(data) => { this.setState({daftar_nama:data.target.value}) }}
                    value = {this.state.daftar_nama}
                />

                <TextField
                    label = 'kontak_ketua'
                    // value = {kontak_ketua}
                    onChangeText={ (kontak_ketua) => this.setState({ kontak_ketua }) }
                    // onChange={(data) => { this.setState({kontak_ketua:data.target.value}) }}
                    value = {this.state.kontak_ketua}
                />

                <TextField
                    label = 'Dosen Pembina'
                    // value = {dosen_pembina}
                    onChangeText={ (dosen_pembina) => this.setState({ dosen_pembina }) }
                    // onChange={(data) => { this.setState({dosen_pembina:data.target.value}) }}
                    value = {this.state.dosen_pembina}
                />

                <TextField
                    label = 'app_laboran'
                    // value = {app_laboran}
                    onChangeText={ (app_laboran) => this.setState({ app_laboran }) }
                    // onChange={(data) => { this.setState({app_laboran:data.target.value}) }}
                    value = {this.state.app_laboran}

                />
                <Button
                    style={{fontSize:20, color:'orange'}}
                    styleDisabled={{color:'grey'}}
                    onPress ={()=>{this.submit(pinjam.id)}}
                    > {"\n"} Submit
                </Button>
                </View>
                {/* <Form type={Pengajuan}/> */}

                <Footer style={{backgroundColor:'white'}}>
                    <Text style={{paddingTop:10,color:'grey'}}>{"\n"}Copyright reserved to @Leony_vw</Text>
                </Footer>
            </ScrollView>


        );
    }

}

export default FormScreens;

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',

    //   ...Platform.select({
    //     android: {
    //         marginTop: StatusBar.currentHeight
    //     }
    // })
    },
  });

Answer 1

ListLab не зарегистрирован в навигаторе, HomeScreen - это.

Чтобы иметь доступ к реквизиту навигации в ListLab, используйте withNavigation компонент более высокого порядка для переноса ListLab.

https://reactnavigation.org/docs/en/connecting-navigation-prop.html

ListLab.js

import { withNavigation } from 'react-navigation';

//...
export default withNavigation(ListLab);
//