如何在React Native中注入JavaScript？

Question

I am developing a react native app. I am super confused that how to inject javascript code in react native. Though I am struggling somehow to work with react native but the thing is sometimes I need to inject some javascript code in my react native or say the homescreen.js type files, but I somehow end up into a syntax error. For example:

I am trying to implement this in a stylesheet.

const styles = Stylesheet.create({
  //some styles
  viewStyle:{
    Platform.select({
      ios:{
        marginTop:2,
      },
      android:{
        marginTop:3
      }
   });
  }
  //some styles
});

But it just does not work! it doesn't work even when I apply ...Platform instead of Platform . **Note: I have import {Platform} from 'react-native'

My version is 0.57.something, but what I want to know is what is the syntax to implement javascript in these files. Just like for example in PHP we have the following:

<?php
  //your logic 
  for(something){
?>
<View></View>
<?php
  }
?>

Similarly for other languages we have something like the <% %> , {{ }} tags but what should I use in React Native. I always end up with a syntax error.

So my questions are, can anyone help me understand what the restriction is within React Native and where I can use and should not use tags? And if tags are available what are they?

I am super confused and was unable to find a similar question like this anywhere on Stack Overflow. I'd appreciate anyone's inputs, the more answers the more it will be helpful.

Answer 1

So I'm not sure what kind of structure you have set up but I'm going to assume you have a single file (lets call it homescreen.js ) and you want to define styles for a component. I'm assuming you have already imported everything that's necessary ( StyleSheet , Platform , View and Text from react-native , and the default export React from react ).

So first, let's make the stylesheet. You almost have it correct above, you need the following:

const styles = Stylesheet.create({
  viewStyle: Platform.select({
    ios:{
      marginTop:2,
    },
    android:{
      marginTop:3
    }
  })
})

(You mention above that you're getting a syntax error, this is probably due to the semicolon in your stylesheet object.)

Now we need to create the React class for your HomeScreen component. Again, not sure of the context but you should be able to pull out the bits you need.

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.viewStyle}>
        <Text>I should have marginTop 2 on iOS and marginTop 3 on Android.</Text>
      </View>
    );
  }
}