根据DOC：

if-else 语句在 JSX 中不起作用。这是因为 JSX 只是函数调用和对象构造的语法糖。

基本规则：

JSX 基本上是语法糖。编译后，JSX 表达式成为常规 JavaScript 函数调用并评估为 JavaScript 对象。我们可以通过用花括号将任何JavaScript 表达式嵌入到 JSX 中。

但是只有表达式而不是语句，这意味着我们不能直接在JSX 中放置任何语句（if-else/switch/for）。

如果要有条件地呈现元素，请使用ternary operator，如下所示：

render() {
    return (   
        <View style={styles.container}>
            {this.state.value == 'news'? <Text>data</Text>: null }
        </View>
    )
}

另一种选择是，调用一个函数jsx并将所有if-else逻辑放入其中，如下所示：

renderElement(){
   if(this.state.value == 'news')
      return <Text>data</Text>;
   return null;
}

render() {
    return (   
        <View style={styles.container}>
            { this.renderElement() }
        </View>
    )
}

您可以通过使用立即调用函数表达式 (IIFE) 来实现您所说的

render() {
    return (   
        <View style={styles.container}>
            {(() => {
              if (this.state == 'news'){
                  return (
                      <Text>data</Text>
                  )
              }
              
              return null;
            })()}
        </View>
    )
}

这是工作示例：

但是，就您而言，您可以坚持使用三元运算符

我发现这种方式是最好的：

{this.state.yourVariable === 'news' && <Text>{data}<Text/>}

我喜欢这个并且它工作正常。

constructor() {
   super();

   this.state ={
     status:true
   }
}

render() {
   return( 

     { this.state.status === true ?
           <TouchableHighlight onPress={()=>this.hideView()}>
             <View style={styles.optionView}>
               <Text>Ok Fine :)</Text>
             </View>
          </TouchableHighlight>
           :
           <Text>Ok Fine.</Text>
     }
  );
}

hideView(){
  this.setState({
    home:!this.state.status
  });
}

你可以这样做。只是不要忘记在您的 JSX 组件之前放置“返回”。

例子：

render() {
    if(this.state.page === 'news') {
        return <Text>This is news page</Text>;
    } else {
        return <Text>This is another page</Text>;
    }
}

从互联网获取数据的示例：

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

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

        this.state = {
            bodyText: ''
        }
    }

    fetchData() {
        fetch('https://example.com').then((resp) => {
            this.setState({
                bodyText: resp._bodyText
            });
        });
    }

    componentDidMount() {
        this.fetchData();
    }

    render() {
        return <View style={{ flex: 1 }}>
            <Text>{this.state.bodyText}</Text>
        </View>
    }
}