Question

我之前曾体验过React，并试图学习React Native，所以这是我关于react-navigation的问题我有一些单独的类或js文件用于反应导航

main.js

type Props = {};
class Main extends Component<Props> {
    componentDidMount() {
        SplashScreen.hide();
    }

    render() {
        return (
            <Container>
                <MainPostsList />
            </Container>
        )
    }
};
const Stack = createStackNavigator();
//its not a class for this navigation thing
function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={Main} />
                <Stack.Screen name="Post" component={PostsPage} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

postlist.js

export default class MainPostLists extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isLoading: true,
            data: [],
        }
    }

    componentDidMount() {
        getMainPosts().then(data => {
            this.setState({
                isLoading: false,
                data: data
            })
        }, error => {
            Alert.alert('An error has occurred', 'Please try again later.')
        })
    }

    render() {
        console.log(this.state.data.data);
        let view = this.state.isLoading ? (
            <View>
                <ActivityIndicator animating={this.state.isLoading} size={"large"} style={{paddingTop: 40}} />
            </View>
        ) : (
                <List
                    dataArray={this.state.data.data}
                    renderRow={(item) => {
                        return <MenuPostItem data={item} />
                    }} />
            )
        return (
            <Container>
                <Content>
                    {view}
                </Content>
            </Container>
        )
    }
}

postlistitem.js

export default class MenuPostItem extends Component {
    constructor(props) {
        super(props);
        this.data = props.data;

    }

    render() {
        console.log(this.data)
        const goToPostPage = (postlink) => {
            console.log("Going to Post Page " + postlink);
            this.props.navigation.navigate('Post')
        };

        return (

            <ListItem button onPress={() => {goToPostPage(this.data.postlink)}} onLongPress>
                <Left>
                    {this.data.type === 'video' ? (
                        <Thumbnail style={{ width: 150, height: 84, borderRadius: 0 }} source={{
                            uri: `http://` + hostname + `:5000/media/streamimage?src=${this.data.media.videothumbsrc}`
                            //uri: ImageThumbTest
                        }} />
                    ) : (null)}
                    {this.data.type === 'text' ? (
                        <Thumbnail style={{ width: 150, height: 84, borderRadius: 0 }} />,
                        <Text style={{paddingLeft: 40, paddingRight: 40}}>Text Post</Text>
                    ) : (null)}
                </Left>
                <Body>
                    <Text>{this.data.title}</Text>
                    <Text note numberOfLines={3}>{this.data.description}</Text>
                </Body>
            </ListItem>
        )
    }
}

当我单击列表中的项目时，此错误在Android上出现：

应该转到动态页面发布

Answer 1

MenuPostItem无法访问导航道具。

在这里您可以访问导航道具

将导航道具从MainPostLists组件传递到MenuPostItem

<List
  dataArray={this.state.data.data}
  renderRow={(item) => {
    return <MenuPostItem data={item} navigation={this.props.navigation} />;
  }}
/>;

使用useNavigation挂钩（您需要将MenuPostItem更改为功能组件才能使用useNavigation挂钩）

一个最小的例子

import * as React from "react";
import { Button } from "react-native";
import { useNavigation } from "@react-navigation/native";

function MenuPostItem() {
  const navigation = useNavigation();

  return (
    <Button
      title="go to post"
      onPress={() => {
        navigation.navigate("Post");
      }}
    />
  );
}

详细了解useNavigation

Answer 2

为以下列表项创建函数

const MenuPostItem = ({data, onPress}) = > {
return (
    <ListItem button onPress={() => onPress('Post')}>
        <Left>
          {data.type === 'video' ? (
           <Thumbnail 
            style={{ width: 150, height: 84, borderRadius: 0 }} 
            source={{uri: `http://` + hostname + `:5000/media/streamimage?src=${data.media.videothumbsrc}`}}
            />
          ) : (null)}
          {data.type === 'text' ? (
            <Thumbnail style={{ width: 150, height: 84, borderRadius: 0 }} />,
            <Text style={{paddingLeft: 40, paddingRight: 40}}>Text Post</Text>
          ) : (null)}
         </Left>
         <Body>
          <Text>{data.title}</Text>
          <Text note numberOfLines={3}>{data.description}</Text>
         </Body>
    </ListItem>
)}

export default MenuPostItem;

，然后在MainPostLists.js文件中-

<List
  dataArray={this.state.data.data}
  renderRow={(item) => {
    return <MenuPostItem data={item} navigation={this.props.navigation.navigate} />;
  }}
/>;

在其他js文件“未定义不是对象”中反应导航“ navigation.navigate”

2 个答案: