Question

所以，我使用2个文件： components.js ，其中定义了我将在我的应用程序中使用的所有零件和模具，以及 App.js ，其中包含逻辑和主要内容。

总而言之，我在 components.js 中定义了一个 Card 类，该类的末尾有一个按钮。这是 Card 的代码：

export class Card extends Component {
  render() {
    return (
      <View style={{height: 700}}> 
          <View style={{flex: 8, backgroundColor: 'white', borderRadius: 20}} > 
              <Image source={{uri: this.props.pic}} style={styles.img}/> 
              <Text style={{flex: 1, fontWeight: 'bold',fontSize: 30, paddingTop: 10}}> {this.props.nome}</Text> 
              <Text style={{flex: 1, fontSize: 20}}> {this.props.descricao}</Text> 
              <TouchableHighlight style={{flex: 1}} onPress={() => ???????} underlayColor="white">
                  <View style={styles.button}>
                    <Text style={styles.buttonText}>Mais informações</Text>
                  </View>
              </TouchableHighlight>
          </View>
      </View>
    );
  }
}

我在 App.js 中按如下方式使用它：

import {Card} from "./components.js";
class App extends Component {
  render() {
    return (
      <View style={{flex: 1, backgroundColor:"#e6e6e1"}}>
      <ScrollView>
        {this.state.locations.map((pico, key) => 
          <Card key={key} pic={pico.img[0]}  nome= {pico.nome_do_pico} descricao={pico.how}/>
        )}    
      </ScrollView>
      </View>
    );
  }
}

（我省略了它从服务器获取信息并放入 locations 数组的部分）

我需要的是该按钮导航到另一个屏幕，称为“详细信息”，并且我已经在 onPress 上尝试了一些操作，但到目前为止没有任何效果。 reactnavigation 的文档以 this.state.navigation.navigate（“ Details”）为例，但是由于 Card 在另一个文件中，因此无法访问 this.state.navigation 。有任何想法吗？

Answer 1

尝试通过修改代码的以下部分来解决问题：

在app.js中

<Card key={key} pic={pico.img[0]}  nome= {pico.nome_do_pico} descricao={pico.how} navigation={navigation}/>

在components.js中：

          <TouchableHighlight style={{flex: 1}} onPress={() => navigation.navigate('Details', {YourParameters: xx } } underlayColor="white">
              <View style={styles.button}>
                <Text style={styles.buttonText}>Mais informações</Text>
              </View>
          </TouchableHighlight>

React Native-从另一个文件导航

1 个答案: