我正在尝试通过使用 React Native Web 库在 Web 中使用 React Native 组件。
但是当这样做时,我的 DOM 元素有很多内联样式,这使得它看起来很杂乱,我们如何才能摆脱作为转换的一部分的冗余样式。
像这样的东西
我们甚至可以摆脱这个转换的内联 css。
这就是我在这里使用的 React Native 组件的样子
import React from "react";
import { View, Text, Platform, StyleSheet } from "react-native";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
android:
"Double tap R on your keyboard to reload,\n" +
"Shake or press menu button for dev menu",
web: "Your browser will automatically refresh as soon as you save the file."
});
const HomeScreen = () => {
return (
<View >
<Text>
Welcome to React Native Web universal app!
</Text>
<Text>
This component is shared between web and react environment. To see how
it works, just edit the HomeScreen.js
</Text>
<Text>{instructions}</Text>
</View>
);
};
/*const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5
}
});*/
export default HomeScreen;
将 RNW 更新到 0.11.4 后,DOM 似乎更干净、更精简,但几乎没有消除它们。