将React转换为React Native

Posted 2021-04-29

bounty到期在3天内。该问题的答案有资格获得+ 50声望赏金。rodrigocf希望对此问题引起更多关注：“我认真地需要弄清区别是什么，以及如何使我的反应片移到本地进行反应”

我有一个React App，我需要将其转换为React Native。我在Web开发方面经验不足，因此这里可能缺少一些必要的知识。我的问题是，当我在模拟器中打开应用程序时，我只会看到白页，上面显示“主页”。到目前为止，这是我翻译的代码。

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js

import React from 'react';
import Routes from './src/core/Routes';
import configureStore from './src/services/store';
import {Provider} from 'react-redux';
import {View} from 'react-native';
import {createMuiTheme, MuiThemeProvider} from '@material-ui/core';
import {
    font_family_default,
    font_family_secondary,
    font_size_md,
    font_size_sm,
    font_weight_bold,
    font_weight_normal,
    font_weight_semi_bold,
} from './src/assets/style/variables';
import {rem} from './src/assets/style/functions';
import colors from './src/assets/style/colors';

const theme = createMuiTheme({
    typography: {
        fontFamily: font_family_default,
        fontSize: 16,
        fontWeightLight: font_weight_normal,
        fontWeightRegular: font_weight_semi_bold,
        fontWeightMedium: font_weight_bold,
    },
    overrides: {
        MuiMenuItem: {
            root: {
                fontSize: font_size_sm,
                fontFamily: font_family_secondary,
                fontWeight: font_weight_semi_bold,
                minHeight: rem(40),
            },
        },
        MuiMenu: {
            paper: {
                boxShadow: '0px 12px 56px -8px rgba(0,0,0,0.2)',
                borderRadius: `${rem(3)}`,
            },
        },
        MuiExpansionPanelSummary: {
            root: {
                padding: `0px ${rem(16)}`,
            },
            content: {
                margin: `${rem(8)} 0px `,
            },
        },
        MuiInputBase: {
            root: {
                fontSize: font_size_md,
            },
        },
        MuiPickersToolbar: {
            toolbar: {
                backgroundColor: colors.grey.primary,
            },
        },
        MuiPickersDay: {
            daySelected: {
                backgroundColor: colors.yellow.dark2,
                '&:hover': {
                    backgroundColor: colors.yellow.dark2,
                },
            },
        },

        MuiPickersClockNumber: {
            clockNumberSelected: {backgroundColor: colors.yellow.dark2},
        },

        MuiPickersClock: {
            pin: {backgroundColor: colors.yellow.dark2},
        },
        MuiPickersClockPointer: {
            pointer: {backgroundColor: colors.yellow.dark2},
            thumb: {border: `14px solid ${colors.yellow.dark2}`},
        },
    },
});

const store = configureStore();

const App: () => React$Node = () => {
    return (
        <Provider store={store}>
            <MuiThemeProvider theme={theme}>
                <View style={{flex: 1}}>
                    <Routes/>
                </View>
            </MuiThemeProvider>
        </Provider>
    );
};

export default App;

Routes.js

import React from 'react';
import {Router, Scene} from 'react-native-router-flux';
import Login from '../pages/login';

const Routes = () => (
    <Router>
        <Scene key="root">
            <Scene key="home" component={Login} title="Home" initial={true}/>
        </Scene>
    </Router>
);

export default Routes;

/ src / page / login / index.js

import React, {useState} from 'react';
import styled from 'styled-components/native';
import Input from '../../shared/components/Input';
import Button from '../../shared/components/Button';
import {connect} from 'react-redux';
import {APP_ROUTES} from '../../core/global-constants';
import {Link, Redirect} from 'react-router-native';

import Logo from '../../assets/img/log.svg';
import colors from '../../assets/style/colors';
import {rem} from '../../assets/style/functions';
import {device, font_size_md, font_size_xxl, font_weight_normal} from '../../assets/style/variables';
import {login} from '../../services/actions/authenticationActions';
import useForm from '../../shared/hooks/useForm';
import validate from './loginFormValidations';

const theme = {
    backgroundColor: colors.white.light1,
};

function Login(props) {
    const {values, handleChange, handleSubmit, errors} = useForm(login, validate);
    const [redirect, setRedirect] = useState(false);
    const [errorLogin, setErrorLogin] = useState(false);

    function login() {
        if (Object.keys(errors).length === 0) {
            props.login(values).then(
                res => {
                    setRedirect(true);
                },
                err => {
                    errors.login = props.errorMessage
                        ? `${props.errorMessage},  please try again`
                        : `No active account found with the given credentials,  please try again`;
                    setErrorLogin(true);
                },
            );
        }
    }

    if (redirect) {
        return <Redirect to={APP_ROUTES.timeTracker}/>;
    }
    return (
        <Style.Section>
            <Style.Img src={Logo} alt="toki timer logo"/>
            <Style.Hero>
                <Style.Title>Welcome back!</Style.Title>
                <Style.Subtitle>Log in to continue</Style.Subtitle>
            </Style.Hero>
            <Style.Form onSubmit={handleSubmit}>
                <Style.FormGroup>
                    <Input
                        id="username"
                        name="username"
                        placeholder="Username"
                        backgroundColor={theme}
                        onChange={handleChange}
                        value={values.username || ''}
                        hasError={errors.username}
                    />
                    {errors.username && <Style.ErrorMessage>{errors.username}</Style.ErrorMessage>}
                </Style.FormGroup>

                <Style.FormGroup>
                    <Input
                        id="password"
                        name="password"
                        type="password"
                        placeholder="Password"
                        backgroundColor={theme}
                        onChange={handleChange}
                        value={values.password || ''}
                        hasError={errors.password}
                    />
                    {errors.password && <Style.ErrorMessage>{errors.password}</Style.ErrorMessage>}
                    {errorLogin && <Style.ErrorMessage>{errors.login}</Style.ErrorMessage>}
                </Style.FormGroup>
                <Button name="Login" type="submit"/>
            </Style.Form>
            <Style.Hero>
                <Style.BottomLinks>
                    <Style.Link to={APP_ROUTES.forgotPassword}>Forgot your password?</Style.Link>
                </Style.BottomLinks>
            </Style.Hero>
        </Style.Section>
    );
}

const mapStateToProps = state => {
    return {
        loading: state.authorization.loading,
        isAuthenticated: state.authorization.isAuthenticated,
        loginSuccess: state.authorization.loginSuccess,
        loginError: state.authorization.loginError,
        errorMessage: state.authorization.errorMessage,
        isAdmin: state.authorization.userInSession.isAdmin,
    };
};
const mapDispatchToProps = {login};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Login);

const Style = {};

Style.Section = styled.SectionList`
  background-color: ${colors.grey.primary};
  min-height: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
`;
Style.Form = styled.View`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 35%;
  margin-bottom: ${rem(40)};

  @media ${device.mobileS} {
    padding: 0 5%;
  }

  @media ${device.mobileL} {
    padding: 0 15%;
  }

  @media ${device.laptop} {
    padding: 0 35%;
  }
`;

Style.Hero = styled.View`
  display: flex;
  flex-direction: column;
  margin-bottom: ${rem(70)};
  align-items: center;
`;
Style.Title = styled.Text`
  color: ${colors.white.primary};
  font-size: ${font_size_xxl};
  font-weight: ${font_weight_normal};
  margin: 0;
`;
Style.Subtitle = styled(Style.Title)`
  font-size: ${font_size_md};
`;
Style.Img = styled.Image`
  margin-bottom: ${rem(60)};
  margin-top: ${rem(60)};
`;
Style.BottomLinks = styled.Text`
  color: ${colors.white.primary};
  margin-top: ${rem(10)};
`;

Style.Link = styled(Link)`
  color: ${colors.yellow.primary};

  &:hover {
    text-decoration: underline;
  }
`;
Style.FormGroup = styled.View`
  margin-bottom: ${rem(45)};
`;
Style.ErrorMessage = styled.Text`
  font-size: ${font_size_md};
  color: ${colors.red.primary};
`;

[阅读文档后，我似乎不了解路由的工作方式，例如，使用React，我的Routes.js看起来像这样：

import React from 'react'
import { Switch, Route } from 'react-router-dom'

import { APP_ROUTES } from './global-constants'
import Login from '../pages/login'
import Dashboard from '../pages/dashboard'
import TimeTracker from '../pages/time-tracker'
import SignUp from '../pages/signUp'
import PrivateRoute from '../shared/components/PrivateRoute'
import UserList from '../pages/user-list'
import DepartmentsList from '../pages/departments-list'
import Reports from '../pages/reports'
import UserProfile from '../pages/user-profile'
import ForgotPassword from '../pages/forgot-password'
import NotFound from '../shared/components/NotFound'

const Routes = () => (
  <main>
    <Switch>
      <Route exact path={[APP_ROUTES.home, APP_ROUTES.login]} component={Login} />
      <Route exact path={APP_ROUTES.signUp} component={SignUp} />
      <Route exact path={APP_ROUTES.forgotPassword} component={ForgotPassword} />
      <PrivateRoute
        exact
        path={[APP_ROUTES.dashboard, APP_ROUTES.dashboardDeparment]}
        component={Dashboard}
      />
      <PrivateRoute exact path={APP_ROUTES.timeTracker} component={TimeTracker} />
      <PrivateRoute exact path={APP_ROUTES.usersList} component={UserList} />
      <PrivateRoute exact path={APP_ROUTES.departments} component={DepartmentsList} />
      <PrivateRoute exact path={APP_ROUTES.reports} component={Reports} />
      <PrivateRoute exact path={APP_ROUTES.userDetails} component={UserProfile} />
      <PrivateRoute component={NotFound} />
    </Switch>
  </main>
)

export default Routes

我已经对路由文件进行了更改，因为我已经知道react-router-dom在本机中不起作用。我的主要目的是尽可能多地重用代码，但是如果不能，我需要更改什么才能使页面实际显示在模拟器中？

附带说明，我来自严格的Python和DB背景，Web开发不是我的专长，并且某些方面的文档当然似乎有些缺乏，所以如果我缺少简单的内容，请放轻松在我身上。

谢谢！

答案

您必须手动更改代码才能使其与react-native一起使用。我们没有太多相似之处以使React与React native一起工作。您将必须使用本机元素才能正常工作。

另一答案

建议查看这几个链接，您将对这个问题有更好的了解。

• What is the quickest way to convert a React app to React Native?
• https://medium.com/@gwen_faraday/converting-a-react-app-to-react-native-d7df17968fc6
• https://www.quora.com/Is-there-any-way-to-convert-React-Native-project-to-React-JS