react-native - navigate to another screen using react native

Question

I am trying to navigate to another screen while pressing on a button using onpress in react native but getting error. Front page is App.js which contains multiple buttons, I am working on event button for now. when I press on event button then it should redirect to the contain in event.js I am a newbie in react. App.js

import React from "react";
import {StyleSheet,Text,View,Button,Image,ProgressViewIOS} from "react-native";
import event from './event.js';


export default class App extends React.Component {
  
  render() {
    return (
      <View>
        <Text style={styles.h1}>WELCOME TO </Text>
        <Image
        style={styles.logo}
        source={require('./logo_tiny.jpg')}
      />
        <View style={styles.container}>
          <View style={styles.b1}>
            <Button
              title="Events"
              onPress={() => this.onPress('navigateToevent')}
              color="#fff"
            />
            </View>
            <View style={styles.b1}>
            <Button
              title="Package"
              onPress={() => this.onPress()}
              color="#fff"
            />
        </View>
          </View>
          <View style={styles.container}>
          <View style={styles.b1}>
            <Button
              title="Promotion"
              onPress={() => this.onPress()}
              color="#fff"
            />
            </View>
            <View style={styles.b1}>
            <Button
              title="Support"
              onPress={() => this.onPress()}
              color="#fff"
            />
        </View>
          </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  h1: {
    textAlign: 'center',
    color: '#1E7778',
    fontSize: 32,
    marginTop: 18,
    width: 400,
    fontWeight: 'bold',
  },
  container: {
    flexDirection: 'row',
},
  b1: {
    width: '40%',
    margin: 20,
    padding: 10,
    backgroundColor: '#D16B11',
    borderRadius: 20,
  },
 logo: {
  alignItems: 'center',
  justifyContent:'center',
  left: '20%',
},
});

event.js

import React from 'react';
export default class event extends React.Component {
    navigateToevent = () => {
        this.props.navigation.navigate('event');
      };

    constructor(props) {
        super(props);

        this.state = {
            country: null,
            city: null,
            cities: []
        };
    }

    changeCountry(item) {
        let city = null;
        let cities;
        switch (item.value) {
            case 'fr':
                cities = [
                    {label: 'Paris', value: 'paris'}
                ];
            break;
            case 'es':
                cities = [
                    {label: 'Madrid', value: 'madrid'}
                ];
            break;
        }

        this.setState({
            city,
            cities
        });
    }

    changeCity(item) {
        this.setState({
            city: item.value
        });
    }

    render() {
        return (
            <>
                <DropDownPicker
                    items={[
                        {label: 'France', value: 'fr'},
                        {label: 'Spain', value: 'es'},
                    ]}
                    defaultNull
                    placeholder="Select your country"
                    containerStyle={{height: 40}}
                    onChangeItem={item => this.changeCountry(item)}
                />
                <DropDownPicker
                    items={this.state.cities}
                    defaultNull={this.state.city === null}
                    placeholder="Select your city"
                    containerStyle={{height: 40}}
                    onChangeItem={item => this.changeCity(item)}
                />
            </>
        );
    }
}

标签： react-native

Answer 1

// event.js

import React from "react";
import DropDownPicker from "react-native-dropdown-picker";

export default class event extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      country: null,
      city: null,
      cities: [],
    };
  }

  changeCountry(item) {
    let city = null;
    let cities;
    switch (item.value) {
      case "fr":
        cities = [{ label: "Paris", value: "paris" }];
        break;
      case "es":
        cities = [{ label: "Madrid", value: "madrid" }];
        break;
    }

    this.setState({
      city,
      cities,
    });
  }

  changeCity(item) {
    this.setState({
      city: item.value,
    });
  }

  render() {
    return (
      <>
        <DropDownPicker
          items={[
            { label: "France", value: "fr" },
            { label: "Spain", value: "es" },
          ]}
          defaultNull
          placeholder="Select your country"
          containerStyle={{ height: 40 }}
          onChangeItem={(item) => this.changeCountry(item)}
        />
        <DropDownPicker
          items={this.state.cities}
          defaultNull={this.state.city === null}
          placeholder="Select your city"
          containerStyle={{ height: 40 }}
          onChangeItem={(item) => this.changeCity(item)}
        />
      </>
    );
  }
}

// main.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  ProgressViewIOS,
} from "react-native";
import event from "./event.js";

export default class Main extends React.Component {
  navigateToevent = () => {
    this.props.navigation.navigate("event");
  };

  render() {
    return (
      <View>
        <Text style={styles.h1}>WELCOME TO </Text>
        <Image style={styles.logo} />
        <View style={styles.container}>
          <View style={styles.b1}>
            <Button
              title="Events"
              onPress={() => this.navigateToevent()}
              color="#fff"
            />
          </View>
          <View style={styles.b1}>
            <Button
              title="Package"
              onPress={() => this.onPress()}
              color="#fff"
            />
          </View>
        </View>
        <View style={styles.container}>
          <View style={styles.b1}>
            <Button
              title="Promotion"
              onPress={() => this.onPress()}
              color="#fff"
            />
          </View>
          <View style={styles.b1}>
            <Button
              title="Support"
              onPress={() => this.onPress()}
              color="#fff"
            />
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  h1: {
    textAlign: "center",
    color: "#1E7778",
    fontSize: 32,
    marginTop: 18,
    width: 400,
    fontWeight: "bold",
  },
  container: {
    flexDirection: "row",
  },
  b1: {
    width: "40%",
    margin: 20,
    padding: 10,
    backgroundColor: "#D16B11",
    borderRadius: 20,
  },
  logo: {
    alignItems: "center",
    justifyContent: "center",
    left: "20%",
  },
});

// App.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  ProgressViewIOS,
} from "react-native";
import event from "./event.js";
import main from "./main.js";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

const AppNavigator = createStackNavigator({
  main: {
    screen: main,
  },
  event: {
    screen: event,
  },
});

class App extends React.Component {
  render() {
    return (
      <View>
        <AppNavigator />
      </View>
    );
  }
}

export default AppContainer = createAppContainer(AppNavigator);

试试这个对你有用