first of all, the style references applied by, React Native and React are different.

in React, styles can be written in a css/less/sass file, and styles can be referenced either in the link tag in html or in js files. It is important to note that you must use css-loader and style-loader, so as not to report an error, "module not found"!

import './style.css';//css 
  class App extends Component {
    render() {
      return (<div className="container"></div>);//classNameclass 
    }
  }

but in React-Native, there are two ways to introduce it, one is inline style, the other is to define style object, remember-this style is written in js file, the way we use is to define style in the way of object

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

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
        <Text style={styles.bigblue}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

All the React Native components accept a style property. The value can be a registered object, a plain object, or an array.
all React Native components accept a style property whose value can be a registered object, a simple object, or an array

at the same time, you need to know that React Native does not support all browser CSS attributes. It only supports some common attributes. For more information, please see react-native css supports attributes

so, go back to the above question. Why can Twitter be displayed on the web side using React Native technology? I checked and found that I used an open source framework called React Native for Web .

const Box = () => <View style={styles.box} />

const styles = StyleSheet.create({
  box: {
    margin: 0
  }
});

<style>
.rn-1mnahxq { margin-top: 0px; }
.rn-61z16t { margin-right: 0px; }
.rn-p1pxzi { margin-bottom: 0px; }
.rn-11wrixw { margin-left: 0px; }
</style>

<div class="rn-156q2ks rn-61z16t rn-p1pxzi rn-11wrixw"></div>

as to why there is only a < style id= "react-native-stylesheet" > < / style > tag on the page, and there is no actual css code, it is because the style is not stored in the form of css, but a JS object. The article on the Nuggets analyzes how the code implements this function in detail. You can take a look at