在React Native中使用Button道具导航屏幕时出错

Question

我一直在尝试一些响应本机中的导航代码，我想从Listlab屏幕导航到FormScreen以进行更新，这意味着我想导航屏幕并将值传递给新屏幕及其文本字段。但是当我尝试时，它向我显示了一个错误，我已经尝试解决了很多次。您能帮我解决这个错误吗，谢谢：D

以下是错误消息：

这是我的Listlab代码：

import React, { Component } from 'react';
import {  View, Text, StyleSheet, Platform, StatusBar} from 'react-native';
import PropTypes from 'prop-types';
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
import { CardItem } from 'native-base';
import { ScrollView } from 'react-native-gesture-handler';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator } from 'react-navigation-stack';
import Button from 'react-native-button';

从“反应导航”导入{withNavigation};    ListLab类扩展了组件{

  _OnButtonPress(no_pengajuan) {
    Alert.alert(no_pengajuan.toString());
  }

  handleDelete(id){
    let url = "http://URL:8000/api/pinjams/"+id ;
    // let data = this.state;
    fetch(url,{
        method:'DELETE',
        headers:{
          "Content-Type" : "application/json",
          "Accept" : "application/json"
      },
    })
    .then((result) => {
        result.json().then((resp) => {
            console.warn("resp", resp)
            alert("Data is Removed")
        })
    })
}

  render() {
    this._OnButtonPress = this._OnButtonPress.bind(this);
    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>
                  <CardContent><Text>{ pinjam.jam_mulai } - {pinjam.jam_selesai }</Text></CardContent>

                </Card>
                <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.props.navigation.navigate('FormScreen')}}
                > {"\n"} Update
            </Button>
                </View>
            )
        })}
      </View>
    );
  }

}

const styles = StyleSheet.create({
    pinjamList: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around',
    },
    pinjamtext: {
        fontSize: 14,
        fontWeight: 'bold',
        textAlign: 'center',
    }
});

使用Navigation（ListLab）导出默认值； 这是我的FormScreen代码：

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:8000/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 = '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
    //     }
    // })
    },
  });

这是我的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';
import * as firebase from "firebase";
const { width } = Dimensions.get('window');
var firebaseConfig = {
  apiKey: "XXXXXX",
  authDomain: "XXXXX",
  databaseURL: "XXXXX",
  projectId: "XXXXX",
  storageBucket: "XXXXX",
  messagingSenderId: "XXXXX",
  appId: "XXXXX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

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

Answer 1

这可能是因为Listlab由实际上是屏幕的组件呈现。

例如，假设您的FormScreen将呈现Listlab组件。 FormScreen可以访问导航道具，但Listlab没有。

您有2个解决方案： -将导航道具传递给Listlab -使用withNavigation HOC

Answer 2

我昨晚找到了解决方案，我想我可以从ListLab导航，因为ListLab就像HomeScreen的子屏幕一样。当我在HomeScreen上尝试时，道具运行良好，并且可以导航到我的FormScreen。而且，我想我确实在App.js中调用了FormScreen的错误别名，这也是问题所在。但是现在，我想将按钮和导航放置在ListLab中，我仍然想知道如何在子屏幕中使用按钮进行导航。但是，谢谢你们对我的帮助：D干杯！