javascript - react router native 在前一个组件上呈现链接组件

Question

当我链接到一个组件时，它会呈现但覆盖现有组件。它不会“导航”， View 不会被链接的 View 替换。

应用程序.js:

import React, { Component } from 'react'
import {
  Text,
  TextInput,
  View,
  AppRegistry,
  TouchableHighlight,
  Image,    
  TouchableOpacity,
} from 'react-native'
import styles from './LoginStyleSheet';
import CircleCheckBox , {LABEL_POSITION} from 'react-native-circle-checkbox';
import SocialFooter from './SocialFooter';
import { NativeRouter, Route, Link, Redirect, withRouter } from 'react-router-native'
import TelUtiles from './TelUtiles';
//const { navigation } = this.props;
//const resp = navigation.getParam('resp', 'NO-resp');

const AuthExample = () => (

  <NativeRouter>
    <View style={styles.container}>
      <View style={styles.container_logo}>
        <Image source={require('./img/logo-main.png')} style={styles.logo_img} />
      </View>
      <View style={styles.welcomeMsg}>                                                         
        <Text 
            style={styles.welcomeMsg_textTop}>
            ¡Bienvenido a nuestra 
        </Text>
        <Text 
            style={styles.welcomeMsg_textBottom}>
            familia mascotera!
        </Text>
        <View style={styles.container_input_dni}>
            <TextInput placeholder='DNI:' placeholderTextColor="#E3A141" underlineColorAndroid="#E3A141" style={styles.input_dni} />                        
        </View>
        <Link
          to="/protected"
          style={styles.navItem_login}
          underlayColor='#f0f4f7'>
            <Text style={styles.navItem_login_text}>Protected Page</Text>
        </Link>
      </View>
      <AuthButton/>
      <View style={styles.nav}>
        <Link
          to="/public"
          style={styles.navItem}
          underlayColor='#f0f4f7'>
            <Text>Public Page</Text>
        </Link>
        <Link
          to="/protected"
          style={styles.navItem}
          underlayColor='#f0f4f7'>
            <Text>Protected Page</Text>
        </Link>
        <Link
            to="/TelUtiles"
            style={styles.navItem_login}
            underlayColor='#f0f4f7'>
            <Image source={require('./img/icono-tel.png')} style={{width:70, height:70,margin:10}} />
        </Link>
      </View>

      <Route path="/public" component={Public}/>
      <Route path="/login" component={Login}/>
      <Route path="/TelUtiles" component={TelUtiles}/>
      <PrivateRoute path="/protected" component={Protected}/>


    </View>
  </NativeRouter>


)

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 100) // fake async
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 100)
  }
}

const AuthButton = withRouter(({ history }) => (
  fakeAuth.isAuthenticated ? (
    <View>
      <Text>Welcome!</Text>
      <TouchableHighlight style={styles.btn} underlayColor='#f0f4f7' onPress={() => {
        fakeAuth.signout(() => history.push('/'))
      }}><Text>Sign out</Text></TouchableHighlight>
    </View>
  ) : (
    <Text>You are not logged in.</Text>
  )
))

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

const Public = () => <Text style={styles.header}>Public</Text>
const Protected = () => <Text style={styles.header}>Protected</Text>

class Login extends Component {
  state = {
    redirectToReferrer: false
  }

  login = () => {
    fakeAuth.authenticate(() => {
      this.setState({ redirectToReferrer: true })
    })
  }

  render() {
    const { from } = this.props.location.state || { from: { pathname: '/' } }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer) {
      return (
        <Redirect to={from}/>
      )
    }

    return (
      <View>
        <Text>You must log in to view the page at {from.pathname}</Text>

        <TouchableHighlight style={styles.btn} underlayColor='#f0f4f7' onPress={this.login}>
          <Text>Log in</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

export default AuthExample

Answer 1

如果您只想在某个路由上呈现 AuthExample 的内容，您可以将其分解为一个单独的组件并在索引路由 / 上呈现它，并且还使用一个 Switch 组件来确保一次只使用 Switch 中的一个 Route 组件。

示例

const Main = () => (
  <View>
    <View style={styles.welcomeMsg}>
      <Text style={styles.welcomeMsg_textTop}>¡Bienvenido a nuestra</Text>
      <Text style={styles.welcomeMsg_textBottom}>familia mascotera!</Text>
      <View style={styles.container_input_dni}>
        <TextInput
          placeholder="DNI:"
          placeholderTextColor="#E3A141"
          underlineColorAndroid="#E3A141"
          style={styles.input_dni}
        />
      </View>
      <Link
        to="/protected"
        style={styles.navItem_login}
        underlayColor="#f0f4f7"
      >
        <Text style={styles.navItem_login_text}>Protected Page</Text>
      </Link>
    </View>
    <AuthButton />
    <View style={styles.nav}>
      <Link to="/public" style={styles.navItem} underlayColor="#f0f4f7">
        <Text>Public Page</Text>
      </Link>
      <Link to="/protected" style={styles.navItem} underlayColor="#f0f4f7">
        <Text>Protected Page</Text>
      </Link>
      <Link
        to="/TelUtiles"
        style={styles.navItem_login}
        underlayColor="#f0f4f7"
      >
        <Image
          source={require("./img/icono-tel.png")}
          style={{ width: 70, height: 70, margin: 10 }}
        />
      </Link>
    </View>
  </View>
);

const AuthExample = () => (
  <NativeRouter>
    <View style={styles.container}>
      <View style={styles.container_logo}>
        <Image
          source={require("./img/logo-main.png")}
          style={styles.logo_img}
        />
      </View>

      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/public" component={Public} />
        <Route path="/login" component={Login} />
        <Route path="/TelUtiles" component={TelUtiles} />
        <PrivateRoute path="/protected" component={Protected} />
      </Switch>
    </View>
  </NativeRouter>
);