Навигация с React Native Base - PullRequest
Новая
       22

Навигация с React Native Base

0 голосов
/ 23 января 2020

Я хочу перейти на другой экран (например, «Детали»), когда я нажму кнопку входа. Это мой рабочий основной код: (можно проверить на Snack Expo) 

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Title, Text, Form, Item, Input, Label} from 'native-base';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from "react-navigation";

export default class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
    };
  }
  render() {
    return (
      <Container>
      <Text >Instaride</Text>
      <Form>
            <Item floatingLabel>
              <Label onChangeText={(text) => this.setState({username: text})}>Username</Label>
              <Input 
              value={this.state.username}
          onChangeText={username => this.setState({ username })}
          placeholder={'Username'}
          />
            </Item>
            <Item floatingLabel last>
              <Label >Password</Label>
              <Input 
              value={this.state.password}
          onChangeText={password => this.setState({ password })}
          placeholder={'Password'}
          secureTextEntry={true}
          />
            </Item>
          </Form>
          <Left>
            <Button >
              <Text>Login</Text>
            </Button>
            <Text >Forgot Password?</Text>
          </Left>
          <Right>
            <Button hasText transparent>
              <Text>Sign Up Here</Text>
            </Button>
          </Right>
      </Container>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
        <Text>Details Screen</Text>
    );
  }
}

class RegisterationScreen extends React.Component {
  render() {
    return (

        <Text>sign up time</Text>
    );
  }
}

Однако при добавлении этого сообщения появляется ошибка: 

const HomeScreenRouter = DrawerNavigator(
  {
    Home: { screen: Login },
    Chat: { screen: DetailsScreen },
    Profile: { screen: RegisterationScreen }
  }
)

Я не могу понять способ объединить все это: 

onPress={() => this.props.navigation.navigate("Details")}

Кроме того, что именно я должен экспортировать в конце кода?

1 Ответ

1 голос
/ 23 января 2020

Вы должны сделать что-то подобное, чтобы работать ... 

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Title, Text, Form, Item, Input, Label} from 'native-base';
import { StackNavigator } from 'react-navigation';
import { DrawerNavigator } from "react-navigation";
import { createAppContainer } from 'react-navigation';

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
    };
  }
  render() {
    return (
      <Container>
      <Text >Instaride</Text>
      <Form>
            <Item floatingLabel>
              <Label onChangeText={(text) => this.setState({username: text})}>Username</Label>
              <Input 
              value={this.state.username}
          onChangeText={username => this.setState({ username })}
          placeholder={'Username'}
          />
            </Item>
            <Item floatingLabel last>
              <Label >Password</Label>
              <Input 
              value={this.state.password}
          onChangeText={password => this.setState({ password })}
          placeholder={'Password'}
          secureTextEntry={true}
          />
            </Item>
          </Form>
          <Left>
            <Button >
              <Text>Login</Text>
            </Button>
            <Text >Forgot Password?</Text>
          </Left>
          <Right>
            <Button hasText transparent>
              <Text>Sign Up Here</Text>
            </Button>
          </Right>
      </Container>
    );
  }
}
class DetailsScreen extends React.Component {
  render() {
    return (
        <Text>Details Screen</Text>
    );
  }
}

class RegisterationScreen extends React.Component {
  render() {
    return (

        <Text>sign up time</Text>
    );
  }
}

const HomeScreenRouter = createStackNavigator(
  {
    Details: { screen: Details },       
  }
)

export default createAppContainer(HomeScreenRouter);
...