React Native页面间传递书名与页数输入值问题求助

核心问题梳理 #

• 状态复用冲突：你只声明了一个userName状态，两个输入框共用它会导致输入内容互相覆盖，必须给书名、页数各设独立状态。
• TextInput绑定错误：value={String}是错误写法，应该绑定对应的状态变量，而非构造函数。
• 传参键重复：导航传参时重复使用paramKey，对象中重复键会被后者覆盖，等于只传了最后一个值。
• 变量名不匹配：传参时用的pageNum、bookName在原代码中未定义，需和状态变量名对应。
• 接收参数不全：第二页只读取了一个参数，无法展示两个输入框的内容。

修正后的代码 #

Page 1（FirstPage）

import React, { useState } from 'react';
import { SafeAreaView, View, Text, TextInput, Button, StyleSheet } from 'react-native';

const FirstPage = ({ navigation }) => {
  // 给书名、页数分别声明独立状态
  const [bookName, setBookName] = useState('');
  const [pageNum, setPageNum] = useState('');

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Text style={styles.heading}>
          React Native 跨页面传值示例
        </Text>
        <Text style={styles.textStyle}>
          请输入书名和页数，点击按钮传递到下一页
        </Text>
        {/* 书名输入框：绑定对应状态 */}
        <TextInput
          value={bookName}
          onChangeText={(text) => setBookName(text)}
          placeholder={'输入书名'}
          style={styles.inputStyle}
        />
        {/* 页数输入框：绑定对应状态，用数字键盘更合理 */}
        <TextInput
          value={pageNum}
          onChangeText={(text) => setPageNum(text)}
          placeholder={'输入页数'}
          style={styles.inputStyle}
          keyboardType="numeric"
        />
        <Button
          title="跳转到下一页"
          onPress={() =>
            navigation.navigate('SecondPage', {
              // 用不同键传递两个参数
              bookName,
              pageNum
            })
          }
        />
      </View>
    </SafeAreaView>
  );
};

// 补全样式避免报错
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
  },
  heading: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  textStyle: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: 'center',
  },
  inputStyle: {
    width: '100%',
    height: 40,
    borderWidth: 1,
    borderColor: '#ccc',
    paddingHorizontal: 10,
    marginBottom: 15,
    borderRadius: 5,
  },
});

export default FirstPage;

Page 2（SecondPage）

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

const SecondPage = ({ route }) => {
  // 从路由参数中解构出两个值，加默认值避免参数不存在报错
  const { bookName = '未输入', pageNum = '未输入' } = route.params || {};

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Text style={styles.heading}>
          接收来自第一页的参数
        </Text>
        <Text style={styles.textStyle}>
          书名：{bookName}
        </Text>
        <Text style={styles.textStyle}>
          页数：{pageNum}
        </Text>
      </View>
    </SafeAreaView>
  );
};

// 补全样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
  },
  heading: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 30,
  },
  textStyle: {
    fontSize: 16,
    marginBottom: 15,
  },
});

export default SecondPage;

额外提示 #

确保导航栈中已正确注册SecondPage，比如在StackNavigator配置里添加两个页面的路由规则。

内容的提问来源于stack exchange，提问作者TevovoChin