如何在react-native-web上修复React导航？

Question

我正在尝试在Android和Web上实现反应导航。在Android上工作正常，但在网络上我有错误。是否可能因为版本？会导致什么错误？

  

PS：在App.js中，在渲染中，我没有任何视图标记

Error: SyntaxError: ..\node_modules\@react-navigation\native\dist\ResourceSavingSceneView.js: Unexpected token (33:11)

这是Tabs.js：

import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import SignUp from './SignUp';
import SignIn from './SignIn';

const TabNavigator = createBottomTabNavigator({
  SignIn: SignIn,
  SignUp: SignUp,
});

export default createAppContainer(TabNavigator);

这是App.js

import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';

import Tabs from './Tabs';
export default class App extends React.Component {
  render() {
    return (
      <Tabs style={styles.container} />
    );
  }
}

Error in web browser

import React from 'react';
import { StyleSheet, Text, View, TextInput,TouchableOpacity } from 'react-native';

import Amplify,{ Auth } from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure(awsconfig)

export default class SignIn extends React.Component {

  state = {
    firstname: '',
    password: '',
    status: '',
    success: true,
  }

  onChangeText(key,value) {
    this.setState({
      [key] : value
    })
  }

  signIn(){
    // const {username, password} = this.state
    Auth.signIn({
      username: this.state.firstname,
      password: this.state.password,})
    .then( res => {
      console.log('signed up!',res)
      this.props.screenProps.authenticate(true)
      this.setState({
        status : 'Log IN Succesfully!',
        success : false
      })
      console.log(this.state.status)
    })
    .catch( err => {
      console.log('err:',err)
      if(!err.message){
        this.setState({
          status : err
        })
      }
      else{
        this.setState({
          status : err.message
        })
      }
    })
  }

  render() {
    if(this.state.success){
      return (
        <View style={styles.container}>
          <Text style={styles.h2}>Hello!</Text>
          <Text style={styles.p}>Please log in</Text>
          <View style={styles.container}>
            <TextInput
              onChangeText={value => this.onChangeText('firstname',value)}
              style={styles.input}
              value={this.state.firstname}
              placeholder={'First Name *'}
              placeholderTextColor="#2E9598"
            />
            
            <TextInput
              onChangeText={value => this.onChangeText('password',value)}
              style={styles.input}
              value={this.state.password}
              placeholder={'Password *'}
              placeholderTextColor="#2E9598"
            />
        
          </View>
      
          <Text style={styles.status}>
            {this.state.status}
          </Text>
          <View style={[{ width: '94%'}]}>
            <TouchableOpacity style={styles.button} onPress={this.signIn.bind(this)} >
              <Text style={styles.buttontext}>LOG IN</Text>
            </TouchableOpacity>
          </View>
            
        </View>
        
      );

    }
    else{
      return(
        <View>
          <Text style={styles.h2}>DASHBORD</Text>
        </View>
      )
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width:"100%",
    alignItems: 'center',
    justifyContent: 'center'
  },
  h2: {
    fontSize:36,
    fontWeight:'700',
    marginTop:70,
    textAlign:'center'
  },
  p: {
    fontSize:18,
    // marginBottom:30,
    color: '#A3A3A3'
  },
  input: {
    fontSize:18,
    color: '#292929',
    borderBottomWidth:1,
    borderBottomColor: 'rgba(128, 152, 41, 0.2)',
    fontWeight:'600',
    width:"80%",
    marginBottom:30,
    paddingBottom:10
    // placeholderTextColor="#000" 
  },
  button: {
    height:60,
    backgroundColor:'#D93D3B',
    justifyContent:'center'
  },
  buttontext: {
    textAlign:'center',
    fontSize:16,
    color:'white',
    fontWeight:'600',
    letterSpacing:1.6
  },
  status: { 
    fontWeight:'600',
    marginBottom:10,
    color:'red',
    textAlign:'center'
  }
});

Answer 1

可以尝试更改代码吗？

import React from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import Tabs from './Tabs';
 class App extends React.Component {
  render() {
    return (
      <Tabs style={styles.container} />
    );
  }
}

const styles = StyleSheet.create({
  container: { ... },
});

AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag: document.getElementById('react-root') });