React Native 完全指南：前端开发者的移动端之路

import { View, Text, Button, TextInput, FlatList, StyleSheet } from 'react-native';

function App() {
  const [text, setText] = useState('');
  const [items, setItems] = useState([]);

  const addItem = () => {
    if (text.trim()) {
      setItems([...items, text]);
      setText('');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的清单</Text>

      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={text}
          onChangeText={setText}
          placeholder="添加项目..."
        />
        <Button title="添加" onPress={addItem} />
      </View>

      <FlatList
        data={items}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <Text style={styles.item}>{item}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, paddingTop: 50 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  inputRow: { flexDirection: 'row', marginBottom: 20 },
  input: { flex: 1, borderWidth: 1, padding: 10, marginRight: 10 },
  item: { padding: 15, borderBottomWidth: 1 },
});

┌─────────────────┐      ┌─────────────────┐
│   JavaScript    │ ←──→ │     Bridge      │ ←──→ │   原生代码    │
│   (React)       │      │   (异步通信)    │      │   (iOS/Android)│
└─────────────────┘      └─────────────────┘      └─────────────────┘

// React Native
<View>
  <Text>Hello</Text>
  <Button title="点击" onPress={handlePress} />
</View>

// Web React
<div>
  <span>Hello</span>
  <button onClick={handlePress}>点击</button>
</div>

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 8,
  },
});

// useState
const [count, setCount] = useState(0);

// useContext
const ThemeContext = createContext();
const theme = useContext(ThemeContext);

// Redux
import { Provider } from 'react-redux';
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      <MainScreen />
    </Provider>
  );
}

// Zustand
import { create } from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

// 调用原生模块
import { NativeModules, Platform } from 'react-native';

const { CalendarModule } = NativeModules;

// 使用
CalendarModule.createEvent('生日', '2024-01-01', (error: any) => {
  if (error) console.error(error);
});

// 新架构下的原生组件
function MyComponent() {
  return (
    <View>
      <Text>Hello New Architecture!</Text>
    </View>
  );
}