我应该如何将我的单个js文件分为逻辑、演示程序和css文件

Question

我对React native很陌生，并通过在线教程学习它

在这里，我的一个名为RequestScreen的主js文件(js文件(包含所有完整的代码(逻辑、表示、css部分(

我试图用4个js文件(container.js、index.js、presentr.js和styles.js(创建RequestScreen文件夹，而不是一个完整的代码。

然而，我被分离处理所困扰。

为了更好的设计结构，你能帮我把下面的react代码分成4个单独的文件吗？

有什么好榜样吗？

import React, {useState} from 'react';
import styled from 'styled-components';
import Text from '../components/Text'; //Customized Text component
import NumberPad from '../components/NumberPad';  //Customized NumPad component
const SendRequestScreen = ( {navigation} ) => {


//*********Logic Parts it has to be moved to container.js
///////////
///////////
const [amount, setAmount] = useState("0");
const convertToDollars = (currentAmount) => {
const newAmount = currentAmount / 100;
return newAmount.toLocaleString("en-US", { style: "currency", currency: "USD"});
};
const pressKey = (item, index) => {
setAmount((prev) => {
return index != 10 ? prev + item : prev.slice(0, prev.length - 1);
});
};
//*********Presentation parts it has to be moved to presenter.js
///////////
///////////
return (
<Container>
<Text center large heavy margin="16px 0 0 0">
Send
</Text>
<Amount>
<Text title heavy>
{convertToDollars(amount)}
</Text>
<Text bold color="#727479">
Choose amount to send
</Text>
</Amount>
<User>
<ProfilePhoto source={require("../assets/images/test.png")} />
<UserDetails>
<Text medium heavy>
Jin
</Text>
</UserDetails>
<LogOut onLongPress={() => navigation.navigate("Touch")} delayPressIn={0}>
<Text >Log Out</Text>
</LogOut>
</User>
<Send>
<Text medium heavy>
Send {convertToDollars(amount)} to Jin
</Text>
</Send>
<NumberPad onPress={pressKey} />
</Container>

)
}
//*********CSS parts it has to be moved to styles.js
///////////
///////////
const LogOut = styled.TouchableOpacity`
width: 54px;
height: 20px;
margin-right: 12px;
background-color: #5196f4;
border-radius: 4px;
`
const Container = styled.SafeAreaView`
flex: 1;
background-color: #1e1e1e;
`
const Amount = styled.View`
margin-top: 64px;
align-items: center;
`;
const User = styled.View`
margin: 32px 16px;
flex-direction: row;
align-items: center;
`;
const ProfilePhoto = styled.Image`
width: 48px;
height: 48px;
border-radius: 12px;
`;
const UserDetails = styled.View`
flex: 1;
margin: 0 16px;
`;
const Send = styled.TouchableOpacity`
margin: 16px;
background-color: #5196f4;
padding: 16px 32px;
align-items: center;
border-radius: 12px;
`;
const StatusBar = styled.StatusBar``;

export default SendRequestScreen;

Answer 1

这很容易。你可以像mylist-styling.js 一样导出你的样式组件

// mylist-styling.js
export const LogOut = styled.TouchableOpacity`
width: 54px;
height: 20px;
margin-right: 12px;
background-color: #5196f4;
border-radius: 4px;
`
.....

SendRequestScreen.js 中的用法

import React, {useState} from 'react';
import { LogOut } from './myList-styling'; // here is usage
const SendRequestScreen = ( {navigation} ) => {
....
// use here
return (
.....
<LogOut onLongPress={() => navigation.navigate("Touch")} delayPressIn={0}>
<Text >Log Out</Text>
</LogOut>

)
}

使用container.js不是必要的，因为你可以在SendRequestScreen.js中编写登录部分，如果你想要，你可以使用prestor在那里编写通用逻辑

Answer 2

我参与了许多项目，我认为你应该做这样的事情。

就像你有屏幕设置一样。

1. 创建目录名Settings并创建index.js文件
2. 在同一个目录中，你可以创建styles.js(或者在多个屏幕的情况下，你可以在其中创建多个文件的目录样式(
3. 对于视图部分(Presenter(创建新文件SettingsView.js一个HOC，你只需要在这个文件中写下你所有的可视部分，所有的功能和数据都以index.js的形式传递到这个文件中，你需要将你的css文件导入这个文件中

Answer 3

我建议您像下面这样构建它。同样，你可以在屏幕上实现基本逻辑，但如果你想让它们在其他屏幕上可重复使用，除了有一个Util文件夹。在你的情况下，把convertToDollars函数放在Util.js中，让自己不用担心在任何地方实现它。如果有很多人触摸你的代码，会更有帮助。

|— src
|   |— assets
|   |   |— fonts
|   |   |— images
|   |— screens
|   |   |— login
|   |   |   |— index.js
|   |   |   |— styles.js
|   |   |— signup
|   |   |   |— index.js
|   |   |   |— styles.js
|   |— utils
|   |   |— Util.js
|   |   |— DataHandler.js