Question

如何根据用户运行的平台呈现不同的JSX？

import React, { Component } from "react";
import PropTypes from "prop-types";
import { StyleSheet, TouchableOpacity, TouchableHighlight, Platform, Text, Image } from "react-native";

export default class RoundButton extends Component {
    constructor(props) {
        super(props);
    }

    render() {
      const JSX = Platform.OS === "ios" ? <TouchableOpacity> : <TouchableHighlight>

        return (
            <JSX style={styles.container}>
                <Text style={styles.buttonText}>{this.props.title}</Text>
            </JSX>
        );
    }
}

Answer 1

只需执行以下操作：

render(){
     if(Platform.OS === "ios"){
          return (
            <TouchableOpacity style={styles.container}>
                <Text style={styles.buttonText}>{this.props.title}</Text>
            </TouchableOpacity >
          );
      else{
          return (
            <TouchableHighlight style={styles.container}>
                <Text style={styles.buttonText}>{this.props.title}</Text>
            </TouchableHighlight >
          );
      }
}

或这个：

   render(){

        const JSX = Platform.OS === "ios" ? <TouchableOpacity style={styles.container}><Text style={styles.buttonText}>{this.props.title}</Text></TouchableOpacity > : <TouchableHighlight style={styles.container}><Text style={styles.buttonText}>{this.props.title}</Text></TouchableHighlight >

        return (JSX);

    }

Answer 2

只需使用Ternary运算符

render(){ return( <View> { Platform.OS === "ios" ? <TouchableOpacity style={styles.container}> <Text style={styles.buttonText}>{this.props.title}</Text> </TouchableOpacity > : <TouchableHighlight style={styles.container}> <Text style={styles.buttonText}>{this.props.title}</Text> </TouchableHighlight > } </View> ) }

Answer 3

您所发布的代码也只需稍作更改即可使用。只需删除这些标签并在执行条件操作时使用组件名称即可。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  StyleSheet,
  TouchableOpacity,
  TouchableHighlight,
  Platform,
  Text,
  Image,
} from 'react-native';

export default class RoundButton extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const JSX = Platform.OS === 'ios' ? TouchableOpacity : TouchableHighlight; // remove those tags and use simple Component name.

    return (
      <JSX onPress={() => alert('Hi')} style={styles.container}>
        <Text style={styles.buttonText}>{'Hi'}</Text>
      </JSX>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
  },
  buttonText: {},
});

如何进行条件标签渲染？

3 个答案: