Question

我正在尝试使用堆栈导航器浏览屏幕。想法是，我的应用程序也将从聊天列表导航，也从聊天屏幕导航。但是，当我尝试导航到下一个屏幕时，在this.props.navigation上收到一条错误消息，指出“未定义不是对象”。这是我的代码：

MainTabNavigator（包含我的堆栈导航器）

const ChatListStack = createStackNavigator({
  ChatList:ChatListScreen,
  ChatView:ChatScreen,
});

ChatListStack.navigationOptions = {
  tabBarLabel: 'ChatList',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? `ios-options${focused ? '' : '-outline'}` : 
'md-options'}
    />
  ),
};

ChatListScreen（导航从何处开始）

export default class ChatListScreen extends Component {
  constructor(props) {
    super(props);
  }

  static navigationOptions = {
    title: "Chats"
  };

  renderRow({ item }) {
    return (
      <TouchableHighlight
        onPress={() => this.props.navigation.navigate("ChatView")}
      >
        <ListItem
          roundAvatar
          title={item.name}
          subtitle={item.subtitle}
          avatar={{ uri: item.avatar_url }}
        />
      </TouchableHighlight>
    );
  }

  goToChat() {}

  render() {
    return (
      <View style={styles.mainContainer}>
        <SearchBar
          lightTheme
          icon={{ type: "font-awesome", name: "search" }}
          placeholder="Type Here..."
        />
        <List style={styles.listContainerStyle}>
          <FlatList
            data={users}
            renderItem={this.renderRow}
            keyExtractor={item => item.name}
          />
        </List>
      </View>
    );
  }
}

聊天（这是目标聊天屏幕）

export default class ChatScreen extends Component {
  constructor() {
    super();
    this.state = {
  messages: []
    };
  }

  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: "Hello test",
          createdAt: new Date(),
          user: {
            _id: 2,
            name: "dude"
          }
        }
      ]  
    });
  }  

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={message => this.onSend(message)}
        user={{
          _id: 1
        }}
      />
    );
  }
}

Answer 1

要解决此问题，您必须创建一个处理导航的功能，然后将其绑定到承包商中，然后将其发送到您的Touchableopacity

无法导航到下一个屏幕

1 个答案: