Question

嗨，我正在开发一个新的react-native应用程序，但是从组件到屏幕的导航存在一些问题。这是小吃代码的链接：https://snack.expo.io/@mimonoux/my-app-navigation-test

我已经尝试过了 public String repeatText(String strg, int num) { String answer; for(int i=0; i< n; i++){ System.out.print(strg); //how to I set the output of this for loop //as answer, which will then //be set as the return value? } return answer;。但这没用。如果有人可以帮助我，请检查小吃链接并深入了解我为我的真正问题编写的简单代码

Answer 1

尝试添加：

import { NavigationEvents, NavigationActions } from 'react-navigation';

下面是有关道具的屏幕快照，其中涉及以下评论：

这是我在评论中提到的屏幕截图。您可以看到我在哪里添加了console.log。它在控制台中显示，尽管导航位于this.props中，但导航中的操作为空。我认为这是问题的根源。如果您像我已经完成的那样放置更多console.log，您将看到项目丢失该信息的地方。

Answer 2

我现在看到了你的问题。通过反应导航，在以下情况下，导航道具在组件中存在：在您在 App.js 中定义的路由配置对象中配置了该组件，或者您使用了withNavigation HOC（{{3 }}）。

现在 Medicine_listDetail 组件中不存在this.props.navigation ，因为 Medicine_listDetail 不会同时出现在您的路线中功能组件中的 this.props 不应读取> props 对象。您可以通过以下两种方式之一进行操作：

const Medicine_listDetail = ({medicine, navigation}) => {
    // i'm passing navigation props comme from parent component that have
    // navigation object
    // ...
}

// OR you can do

const Medicine_listDetail = (props) => {
    const { medicine, navigation } = props;
    // i'm passing navigation props comme from parent component that have
    // navigation object
    // ...
}

因此，以下是对我有用的解决方案的尝试。

Medicine_listDetail 组件：我正在传递的导航道具来自具有导航对象的父组件

...
const Medicine_listDetail = ({medicine, navigation}) => {

    const {title, coordinate} = medicine;
    const {
        headerContentStyle,
        headerTextStyle,
        cityTextStyle,
        addTextStyle,
        infoContainerStyle,
        buttonsContainerStyle,
        specialityTextStyle,
        buttonStyle,
        textStyle
        } = styles


    return (
    <View>

        <View style={headerContentStyle}>
            <Text style={headerTextStyle}>{title}</Text>
        </View>

        <View style={buttonsContainerStyle}>
          <ButtonCarte  onPress={() => navigation.navigate('Carte') }>
          </ButtonCarte>
        </View>
    </View>
    );
};
...

ButtonCarte 组件

const ButtonCarte = ({onPress, children}) => {
  const {buttonStyle, textStyle} = styles;

  return (
    <TouchableOpacity onPress={() => onPress()} style={buttonStyle}>
        <Ionicons name={'ios-pin'} size={20} color="white" />
        <Text style={textStyle}>
          Voir La Carte
        </Text>
    </TouchableOpacity>
  ); 
};

Medicin 组件：在all_medicine（）函数中，我正在Medicine_listDetail组件的props中传递导航对象。这就是诀窍。

export default class Medicin extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      list_allMedicine: data_allMedicine,
      selectedIndex: 0,
    };
    this.updateIndex = this.updateIndex.bind(this);
  }

  updateIndex(selectedIndex) {
    this.setState({ selectedIndex });
  }

  all_medicine() {
    const { navigation } = this.props;
    return this.state.list_allMedicine.map(medicine => (
      <Medicine_listDetail key={medicine.title} medicine={medicine} navigation={navigation} />
    ));
  }

  render() {
    const buttons = ['Tout', '...', '...', '...'];
    const { selectedIndex } = this.state;
    return (
      <View style={{ flex: 1}}>
        <View
          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ButtonGroup
            onPress={this.updateIndex}
            selectedIndex={selectedIndex}
            buttons={buttons}
            containerStyle={{ borderRadius:8 }}

          />
        </View>
        <Divider
          style={{
            backgroundColor: 'lightgrey',
            marginHorizontal: 5,
            height: 2,
          }}
        />
        <View style={{ flex: 5 }}>
          {this.state.selectedIndex == 0 ? (
            <ScrollView>{this.all_medicine()}</ScrollView>
          ) : (
            <Text>test</Text>
          )}
        </View>
      </View>
    );
  }
}

至少在App.js中，由于您的 RootStack 堆栈，我将Carte选项卡的名称从 Cart 更改为 Carte 。

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: {
        screen: Home,
        navigationOptions: {
          tabBarLabel: 'Home',
          tabBarIcon: ({ tintColor }) => (
            <Ionicons name={'ios-home'} size={25} color={tintColor} />
          ),
        },
      },
      Medicin: {
        screen: Medicin,
        navigationOptions: {
          tabBarLabel: 'Medicin',
          tabBarIcon: ({ tintColor }) => (
            <Image
              source={require('./assets/images/Dashboard/drawable-xhdpi/doctor_heart.png')}
              style={{ width: 25, height: 20, tintColor: tintColor }}
            />
          ),
        },
      },
      Carte: {
        screen: Carte,
        navigationOptions: {
          tabBarLabel: 'Carte',
          tabBarIcon: ({ tintColor }) => (
            <Ionicons name={'ios-map'} size={25} color={tintColor} />
          ),
        },
      },
    },
    {
      tabBarOptions: {
        activeTintColor: 'black',
        inactiveTintColor: 'gray',
      },
    }
  )
);

我测试了一下，对我有用。

反应型导航遇到问题|未定义不是对象（评估'_this.props.navigation'）

2 个答案: