将React转换为React Native
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将React转换为React Native相关的知识,希望对你有一定的参考价值。
我有一个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
以上是关于将React转换为React Native的主要内容,如果未能解决你的问题,请参考以下文章
将 React 应用程序转换为 React Native 的最快方法是啥?
带有 Typescript 的 React-Native 自定义文本组件:“将 React.ReactNode 类型转换为文本类型......”