# 安装Homebrew（如果尚未安装）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 
# 使用Homebrew安装必要的工具
brew install node
brew install yarn
brew install watchman
 
# 安装React Native Command Line Tools
npm install -g react-native-cli
 
# 创建一个新的React Native项目
react-native init AwesomeProject
 
# 进入项目目录
cd AwesomeProject
 
# 启动iOS模拟器（首次启动可能需要一些时间）
open -a Simulator
 
# 运行Metro Bundler（用于热重载）
yarn start
 
# 在另外一个终端中，启动iOS应用
react-native run-ios

以上脚本提供了从零开始搭建React Native原生应用开发环境的步骤，包括安装Node.js、Yarn、Watchman以及React Native CLI工具，创建一个新的React Native项目，并在iOS模拟器上运行它。这个过程是保姆级的，意味着即使是没有任何经验的用户也可以跟随这些步骤进行操作。

import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
import Video from 'react-native-video';
 
const VideoPlayer = ({ videoSource, isPlaying, onPressPlayPause }) => {
  const videoRef = useRef(null);
 
  useEffect(() => {
    if (isPlaying) {
      videoRef.current.presentFullscreenPlayer();
    }
  }, [isPlaying]);
 
  return (
    <View style={styles.container}>
      <Video
        ref={videoRef}
        source={videoSource}
        style={styles.video}
        paused={!isPlaying}
        resizeMode="contain"
        controls
      />
      <TouchableOpacity onPress={onPressPlayPause}>
        <Text style={styles.playPauseText}>
          {isPlaying ? '暂停播放' : '播放'}
        </Text>
      </TouchableOpacity>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  video: {
    width: '100%',
    height: 300,
    marginBottom: 10,
  },
  playPauseText: {
    fontSize: 18,
    color: 'blue',
  }
});
 
export default VideoPlayer;

这个代码示例展示了如何使用React Native Video库来创建一个简单的视频播放器组件。它使用了Hooks API来管理组件的状态，并且提供了播放和暂停视频的功能。这个示例可以作为开发者学习和实践如何在React Native应用中集成和使用React Native Video库的起点。

在React Native中，可以使用react-navigation库来实现Tab切换页面的效果，并且页面可以通过手势左右滑动。react-navigation提供了createBottomTabNavigator用于制作底部Tab栏，以及createStackNavigator用于制作可以左右滑动的页面栈。

以下是一个简单的示例代码：

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
 
// 定义Tab页面
const HomeScreen = () => (
  <View style={styles.container}>
    <Text>Home Screen</Text>
  </View>
);
 
const SettingsScreen = () => (
  <View style={styles.container}>
    <Text>Settings Screen</Text>
  </View>
);
 
// 定义Tab导航器
const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});
 
// 定义页面栈导航器
const StackNavigator = createStackNavigator({
  TabNavigator: {
    screen: TabNavigator,
  },
  // 可以添加更多的页面
});
 
// 创建应用容器
const AppContainer = createAppContainer(StackNavigator);
 
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

在这个例子中，TabNavigator是底部Tab栏，用户可以点击切换HomeScreen和SettingsScreen。StackNavigator是页面栈，它包含了TabNavigator以及可能添加的其他页面，并且允许用户左右滑动切换页面。

确保你已经安装了react-navigation和react-navigation-tabs，可以使用npm或者yarn进行安装：

npm install react-navigation react-navigation-tabs react-navigation-stack

或者

yarn add react-navigation react-navigation-tabs react-navigation-stack

在实际应用中，可以根据需要添加更多的页面和组件。

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
 
export default class TouchableExample extends Component {
  _onPressButton() {
    // 处理按钮点击事件
    console.log('按钮被点击了!');
  }
 
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity onPress={this._onPressButton}>
          <Text>点我!</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

这段代码展示了如何在React Native应用中创建一个可点击的组件。TouchableOpacity是一个允许用户 touch 操作的组件，它在内部处理触摸反馈，比如点击时的透明度变化。onPress属性用于定义一个函数，该函数在组件被触摸并按下时被调用。在这个例子中，当按钮被点击时，控制台会输出一条信息。

import React from 'react';
import { View, Text, Image } from 'react-native';
import FastImage from 'react-native-fast-image';
 
export default class ImageWithProgress extends React.Component {
  render() {
    return (
      <View>
        <FastImage
          style={{ width: 100, height: 100 }}
          source={{
            uri: 'https://example.com/your-image.jpg',
            priority: FastImage.priority.normal,
          }}
          resizeMode={FastImage.resizeMode.contain}
          onLoadStart={() => this.setState({ progress: 0 })}
          onProgress={({ nativeEvent }) => {
            this.setState({ progress: nativeEvent.loaded / nativeEvent.total });
          }}
          onLoad={() => this.setState({ progress: 1 })}
        />
        <Text>{Math.round(this.state.progress * 100)}%</Text>
      </View>
    );
  }
}

这个例子使用了react-native-fast-image库来替代react-native-image-progress，因为react-native-fast-image更加现代，并且是react-native-image-progress的主要维护者推荐的替代品。代码展示了如何在React Native应用中加载一个网络图片，并且实时显示加载进度。

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
const Stepper = ({ value, onChange }) => {
  const [currentValue, setCurrentValue] = useState(value);
 
  const increment = () => {
    const newValue = currentValue + 1;
    setCurrentValue(newValue);
    onChange(newValue);
  };
 
  const decrement = () => {
    const newValue = currentValue - 1;
    setCurrentValue(newValue);
    onChange(newValue);
  };
 
  return (
    <View style={styles.container}>
      <Text onPress={decrement}>-</Text>
      <Text>{currentValue}</Text>
      <Text onPress={increment}>+</Text>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  text: {
    paddingHorizontal: 16,
    paddingVertical: 10,
  },
});
 
export default Stepper;

这段代码实现了一个简易的步进器组件，可以通过点击加号或减号来增加或减少数值，并且将新的数值传递给父组件。使用React Hook useState 来管理组件内部的状态，这是React Native开发中推荐的方式。

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import firebase from 'firebase';
 
// 初始化Firebase
firebase.initializeApp({
  // 你的Firebase配置项
});
 
export default function App() {
  const [messages, setMessages] = useState([]);
 
  useEffect(() => {
    const unsubscribe = firebase.database().ref('messages').on('value', snapshot => {
      const messageArray = snapshot.val();
      const parsedMessages = Object.keys(messageArray).map(key => ({
        ...messageArray[key],
        id: key,
      }));
      setMessages(parsedMessages);
    });
 
    return () => unsubscribe(); // 清理函数，取消订阅
  }, []);
 
  return (
    <View style={styles.container}>
      <FlatList
        data={messages}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item.message}</Text>
          </View>
        )}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  item: {
    margin: 8,
    padding: 8,
    backgroundColor: 'lightblue',
    borderRadius: 8,
  },
});

这段代码展示了如何在React Native应用中使用Firebase实现实时数据的订阅和展示。它使用了Hooks API (useState 和 useEffect)，这是React Native v0.58以后的版本支持的功能。代码中包含初始化Firebase、订阅Firebase数据库中的messages节点、解析数据并更新到状态变量中，以及最终在FlatList组件中渲染消息列表。

为了在iOS原生应用中集成React Native并使用CocoaPods管理依赖，你需要按照以下步骤操作：

1. 在你的iOS项目中创建一个Podfile（如果尚未创建）。
2. 添加React Native和其他所需的CocoaPods依赖到Podfile中。
3. 运行pod install来安装依赖。
4. 配置你的项目以使用React Native的入口点。

以下是一个简化的Podfile示例，展示了如何将React Native集成到iOS项目中：

# 在Podfile文件中，指定你的目标应用项目和React Native版本
platform :ios, '9.0'
target 'MyApp' do
  # 如果你的项目之前没有使用use_frameworks!，请确保你的Pods配置是兼容的
  # use_frameworks!
 
  # 引入React Native Pods
  pod 'React', :path => '../node_modules/react-native', subspecs: [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.47
    'DevSupport', # 如果你需要开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 用于调试，可以不添加
    # 添加任何其他需要的组件
  ]
 
  # 如果你使用的是React Native 0.47或更高版本
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
 
  # 引入其他依赖的Pod库
  # pod 'SomeOtherPod', '~> 1.2.3'
end
 
# Post installation callback
post_install do |installer|
  # 需要引入React Native Pods的目标应用项目文件
  installer.pods_project.targets.each do |target|
    if target.name == 'React'
      # 添加必要的环境变量
      target.build_configurations.each do |config|
        config.build_settings['PRODUCT_NAME'] = '$(TARGET_NAME)'
      end
    end
  end
end

确保将MyApp替换为你的应用目标名称，并将node_modules路径调整为你的React Native节点模块位置。

在命令行中，进入包含Podfile的目录并运行以下命令来安装依赖：

pod install

安装完成后，打开生成的.xcworkspace文件来启动Xcode，并确保按照React Native文档中的说明来配置你的应用，以正确启动React Native代码。

# 使用最新的 Ubuntu 镜像作为基础镜像
FROM ubuntu:latest
 
# 安装 React Native 需要的依赖
RUN apt-get update && \
    apt-get install -y curl git openjdk-8-jdk python-software-properties && \
    curl -sL https://deb.nodesource.com/setup_8.x | bash - && \
    apt-get install -y nodejs
 
# 安装 Android SDK 和相关工具
RUN curl -sS https://get.sdkman.io | bash && \
    source "$HOME/.sdkman/bin/sdkman-init.sh" && \
    sdk install gradle 4.6 && \
    sdk install android 28 && \
    sdk install build-tools 28.0.3
 
# 设置环境变量
ENV ANDROID_HOME $HOME/bin/android-sdk-linux
ENV PATH $PATH:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools
 
# 创建 React Native 项目
RUN npm install -g react-native-cli && \
    mkdir /react-native && \
    react-native init AwesomeProject
 
# 设置工作目录
WORKDIR /react-native/AwesomeProject
 
# 暴露 React Native 的本地开发服务器端口
EXPOSE 8081
 
# 设置默认的运行命令
CMD ["react-native", "run-android"]

这个 Dockerfile 创建了一个包含了 React Native 开发环境和 Android SDK 的 Docker 镜像。它安装了 Node.js 和必要的 Android SDK 工具，初始化了一个新的 React Native 项目，并设置了默认的运行命令来启动 Android 应用。这为开发者提供了一个标准化的环境，使得他们能够更快地开始开发工作。

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import Login from 'react-native-login-animated';
 
const LoginScreen = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
  const onLoginPress = () => {
    // 假设这里进行登录验证
    // ...
    setIsLoggedIn(true);
  };
 
  const onLogoutPress = () => {
    // 假设这里进行登出操作
    // ...
    setIsLoggedIn(false);
  };
 
  return (
    <View>
      {isLoggedIn ? (
        <Text>您已登录</Text>
      ) : (
        <Login
          title="欢迎使用"
          onLogin={onLoginPress}
          onSignUp={() => console.log('注册按钮被点击')}
          forgotPassword={() => console.log('忘记密码按钮被点击')}
        />
      )}
      {isLoggedIn && <Button title="登出" onPress={onLogoutPress} />}
    </View>
  );
};
 
export default LoginScreen;

这个简单的例子展示了如何使用react-native-login-animated库来创建一个动画登录界面，并在登录状态改变时切换内容。同时，它演示了如何使用React Native的useState钩子来管理组件的状态。这个例子可以作为开发者学习如何在React Native应用中集成和使用第三方库的参考。