React Native中如何根据if条件实现渲染与页面跳转控制？

嗨，我来帮你搞定这个根据变量X控制页面渲染和跳转的需求！结合你用Chrome调试、Expo模拟器的场景，我给你整理了一套清晰的实现方案：

首先先补全你没写完的导入代码（应该是react-native的完整导入）：

import React, { Component } from 'react';
import { View, Text, Button, TextInput, Alert, ScrollView, AsyncStorage } from 'react-native';

第一步：拆分窗口组件 #

先把窗口1和窗口2拆成独立组件，方便后续复用和维护：

// 窗口1：X为null时先加载的页面，带跳转按钮
const Window1 = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>这是窗口1</Text>
      <Button 
        title="跳转到窗口2" 
        onPress={() => navigation.navigate('Window2')} 
        style={{ marginTop: 20 }}
      />
    </View>
  );
};

// 窗口2：最终目标页面
const Window2 = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>这是窗口2</Text>
    </View>
  );
};

第二步：主组件处理X的逻辑 #

考虑到你导入了AsyncStorage，假设X是存在本地存储中的值。我们可以在组件挂载时读取X，再根据它的值决定初始渲染的页面：

基础版（无需导航库） #

如果你的项目暂时没用到导航库，可以用状态控制页面切换：

class App extends Component {
  state = {
    xValue: null,
    isLoading: true,
    currentScreen: 'Window1' // 默认先显示窗口1
  };

  componentDidMount() {
    // 从本地存储读取X的值
    this.loadXValue();
  }

  loadXValue = async () => {
    try {
      const storedX = await AsyncStorage.getItem('X');
      // 把存储的字符串转成对应类型，没有值就设为null
      const parsedX = storedX ? JSON.parse(storedX) : null;
      
      this.setState({
        xValue: parsedX,
        isLoading: false,
        // 如果X不为null，直接切换到窗口2
        currentScreen: parsedX !== null ? 'Window2' : 'Window1'
      });
    } catch (err) {
      Alert.alert('出错啦', '读取X的值失败');
      this.setState({ isLoading: false });
    }
  };

  render() {
    const { isLoading, currentScreen } = this.state;

    // 加载过程中显示加载提示
    if (isLoading) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>加载中...</Text>
        </View>
      );
    }

    // 根据当前状态渲染对应窗口
    if (currentScreen === 'Window1') {
      // 给窗口1传跳转方法，点击按钮切换到窗口2
      return <Window1 navigation={{ navigate: (screen) => this.setState({ currentScreen: screen }) }} />;
    } else {
      return <Window2 />;
    }
  }
}

export default App;

进阶版（用React Navigation，更符合Expo项目常规） #

如果你的项目用了Expo推荐的react-navigation，可以更优雅地控制初始路由：
首先安装依赖（Expo中直接执行）：

npx expo install @react-navigation/native @react-navigation/native-stack

然后修改主组件代码：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

class App extends Component {
  state = {
    xValue: null,
    isLoading: true
  };

  componentDidMount() {
    this.loadXValue();
  }

  loadXValue = async () => {
    try {
      const storedX = await AsyncStorage.getItem('X');
      const parsedX = storedX ? JSON.parse(storedX) : null;
      
      this.setState({
        xValue: parsedX,
        isLoading: false
      });
    } catch (err) {
      Alert.alert('出错啦', '读取X的值失败');
      this.setState({ isLoading: false });
    }
  };

  render() {
    const { xValue, isLoading } = this.state;

    if (isLoading) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>加载中...</Text>
        </View>
      );
    }

    return (
      <NavigationContainer>
        <Stack.Navigator 
          // 根据X的值设置初始页面
          initialRouteName={xValue === null ? 'Window1' : 'Window2'}
        >
          <Stack.Screen name="Window1" component={Window1} />
          <Stack.Screen name="Window2" component={Window2} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

核心逻辑说明 #

• 当X === null时：初始加载窗口1，用户点击按钮后跳转到窗口2；
• 当X !== null时：直接加载窗口2，完全跳过窗口1；
• 如果你X的来源不是本地存储（比如props、状态管理库），只需要替换loadXValue里的读取逻辑就行，核心的条件判断逻辑不变。

这套代码在Chrome调试模式和iOS Expo模拟器里都能正常运行，你可以通过修改AsyncStorage里的X值来测试两种场景~

内容的提问来源于stack exchange，提问作者Bráulio Joelson