TypeError : props.navigation.getParam 不是函数。 In(props.navigation.getParam('name')答案

【问题标题】：TypeError : props.navigation.getParam is not a function. In(props.navigation.getParam('name')TypeError : props.navigation.getParam 不是函数。 In(props.navigation.getParam('name')
【发布时间】：2020-03-20 05:55:27
【问题描述】：

我在TypeError : props.navigation.getParam 上遇到的问题不是函数。在(props.navigation.getParam('name')。我正在使用reactNavigation version 5.x.，此代码在reactNavigation 3 中工作。我做错了什么？

这是我的代码

export default class ChatScreen extends Component {
static navigationOption = ({ navigation }) => {
    return {
        title: navigation.getParam('name', null)
    }
}
 
constructor(props) {
    super(props);
   
  
    this.state = {
        person:{
           name:props.navigation.getParam('name'),
            phone:props.navigation.getParam('phone'),
            // name:'Raushan',
          //   phone:9931428888
        },
        textMessage: ''
    };
   
}

状态部分值错误。堆栈导航器

`

const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Auth">
        <Stack.Screen name="AuthLoading" component={AuthLoadingScreen} />
        <Stack.Screen name="App" component={HomeScreen} options={{ title: 'Chats' }}/>
        <Stack.Screen name="Chat" component={ChatScreen} options={({ route }) => ({ title: route.params.name })}/>
        <Stack.Screen name="Auth" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

`

和导航屏幕

onPress={()=>this.props.navigation.navigate('Chat',item)}

【问题讨论】：

您是否在构造函数和 navigationOptions 中检查了 navigation 的值？
检查反应导航版本我认为你使用的是 5.x，他们已经改变了这个功能看到这个reactnavigation.org/docs/params
如果您来自 v3 或 v4，React Navigation v5 有很多重大变化。阅读此Upgrading from 4.x 文档以详细了解库的更改。 reactnavigation.org/docs/upgrading-from-4.x

标签： react-native react-navigation

【解决方案1】：

使用 props.route.params.name 这是可行的

 this.state = {
    person:{
      name: props.route.params.name,
      phone: props.route.params.phone,
    },
    textMessage: ''
};

【讨论】：

有什么理由使用 props.route.params.name 而不是 this.props.navigation.getParam("name") ？
@Swift 可能是新版导航库的原因
这行得通。到处都在使用 navigation.getParams 也很疯狂，但它不再有效

【解决方案2】：

大多数情况下，您使用的是最新版本的 React-Navigation 和相同的旧设置。

所以，你要把你的自定义参数作为导航函数的第二个参数传递给我指向HERE：

// Index SCREEN:=>
const IndexScreen = ({ navigation: { navigate } }) => {

  return (
      <View style={Styles.container}>
      <FlatList
        data={state}
        keyExtractor={(item) => `${item.id}`}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={{ ...Styles.singleBlog, ...Styles.rowing }}
            onPress={() => navigate('Previewing', { id: item.id })} // HERE
          >
            <Text style={Styles.blogTitle}>{`${item.title}`}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

然后您将能够通过一个名为 params 的新函数提取 id 像这样：

// PREVIEWING SCREEN:=>
const PreviewScreen = ({ route: { params } }) => {
  const { state } = useContext(Context);

  const { id } = params;
  return (
    <View style={Styles.container}>
      <Text>preview post with id {id}</Text>
    </View>
  );
};

【讨论】：

【解决方案3】：

在类组件props 可以使用this 关键字访问。所以试试这个：

export default class ChatScreen extends Component {
  static navigationOption = ({ navigation }) => {
    return {
      title: navigation.getParam('name', null)
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      person: {
        name: this.props.navigation.getParam('name'), // access with this.
        phone: this.props.navigation.getParam('phone'), //access with this.
        // name:'Raushan',
        //   phone:9931428888
      },
      textMessage: ''
    };
  }
}

【讨论】：

这个屏幕是在你的堆栈导航器里面还是外面？
是的。聊天屏幕在 stacknavigator ({ title: route.params.name })}/> onPress={()=>this.props.navigation.navigate('Chat',item)}

【解决方案4】：

是的，我发现在使用 getParam 的导航版本 2、3、4 中。链接如下：https://reactnavigation.org/docs/2.x/params/ 根据文档使用 props.navigation.route.param 使用第 5 版导航时。 https://reactnavigation.org/docs/params/ - 版本 5。

【讨论】：

【解决方案5】：

从6.x 版本开始，您需要使用route。

function Index({ navigation }) {
  return (
    <View>
      <Button
        title="Details"
        onPress={() => {
          navigation.navigate('Details', {
            itemId: abcdef
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;

  // console.log(itemId);
  // abcdef

  return (
    // Content...
  );
}

来源：https://reactnavigation.org/docs/params

【讨论】：