react-native 6位代码 - Shell-Bash

如果你是一个移动端应用程序员，你可能已经听说过这个叫做 react-native 的框架了。React Native 是一个用 React 语言构建移动应用程序的框架，使用它可以快速构建出高质量的移动应用。下面是六个 react-native 代码片段：

1. 初始化一个新项目

npx react-native init MyApp

这个命令会在当前目录下创建一个新的名为 MyApp 的 react-native 项目，并初始化配置文件。

2. 运行你的应用程序

npx react-native start

这个命令会启动一个本地开发服务和 Metro Bundler 。你的应用程序可以通过 Xcode 或 Android Studio 运行。

3. 创建新组件

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

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

这个代码片段创建了一个新的 MyComponent 组件，它包含一个 View 和一个 Text 组件。当这个组件被渲染时，它会显示 "Hello, World!" 。

4. 使用样式

import { StyleSheet, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, World!</Text>
    </View>
  );
};

这个代码片段使用了 StyleSheet 对象来管理组件的样式。MyComponent 组件的 View 组件会应用 styles.container 样式。

5. 处理用户输入

import { TextInput, View } from 'react-native';

const MyComponent = () => {
  const [value, onChangeText] = React.useState('');

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
      />
    </View>
  );
};

这个代码片段创建了一个可编辑的 TextInput 组件，并将它的值绑定到了 value 状态变量上。当用户编辑 TextInput 时，onChangeText 会被调用，从而更新 value 的值。

6. 路由和导航

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

const Stack = createStackNavigator();

const MyComponent = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

这个代码片段使用了 @react-navigation 库来创建一个 NavigationContainer 元素。它还创建了一个 StackNavigator ，并使用两个通过 Stack.Screen 定义的组件来实现导航功能。HomeScreen 和 DetailsScreen 组件将在路由到对应屏幕时被渲染。