Question

我可以将函数作为渲染函数中的参数传递到下一个屏幕，因为您可以看到下面的代码

render(){
      return (
        <View style={styles.container}>
        <View style={styles.titlewrapper}>

        <Text style={styles.titleinfo}><Icon name="add-circle" style={{color:"#039BE5"}}/> Customize your own feed </Text>
        </View>
          <TouchableOpacity onPress={()=> requestAnimationFrame(()=>{ this.props.navigation.navigate('topic', {onNavigateBack: this.handleOnNavigateBack.bind(this)
}) }) }
          >
           <View style={styles.buttoncontainer}>
             <Text style={styles.buttontext}>Get started</Text>
             </View>
          </TouchableOpacity>
       </View>

      );
    }

你可以看到我可以将函数“handleOnNavigateBack”作为onNavigateBack param传递给主题屏幕及其工作但我无法在NavigationOptions中实现这一点，你可以在下面看到它

 static navigationOptions = ({ navigation }) => {
      const { params = {} } = navigation.state;
      return{
        headerStyle:{
            elevation:0 
           },
        headerTitle:  (
          <Image style={{ height: responsiveHeight(6), width: responsiveWidth(30), alignSelf:'center' }} source={require('../images/logo-header2.png')}/>
      ),
        headerLeft: <TouchableOpacity  onPress={ () => navigation.navigate('DrawerOpen')  } ><Icon name="menu" style={{paddingLeft:15 }} size={35}/></TouchableOpacity>,
        headerRight: <TouchableOpacity  onPress={ () => navigation.navigate('topic', {
          onNavigateBack: this.handleOnNavigateBack.bind(this)  }) }><Icon name="create" style={{paddingRight:15 }} size={35}/></TouchableOpacity>,

        } 
      };

我已经尝试了所有的东西，但似乎没有工作，任何帮助将不胜感激！

软件|版本

react-navigation | 1.0.0-beta.19

react-native | 0.49.5

Answer 1

因为那个＆＃39;这个＆＃39;在第二个代码中onNavigateBack: this.handleOnNavigateBack.bind(this)没有像你在第一个代码那样指向你的组件。（因为navigationOptions是静态的）

要存档您想要的内容，您应该首先将您的功能从您的组件传递到导航的参数。然后，使用params在NavigationOption中调用它。

react-native和react-navigation无法将函数作为参数传递给NavigationOptions中的下一个屏幕

1 个答案: