Question

我试图根据处于同一组件状态的一个参数修改我的自定义标头。但是我看到它不起作用。我可以在渲染器中做同样的事情，它显然可以，但是如何在页眉中做呢？

例如，在这种情况下，如果import pandas as pd df = pd.read_excel("big_file") for x in range(100000): # Lot of operations # Every one thousand loop we save the data in case the program crashes if np.mod(i,1000) == 0: df.to_csv('backup_{}.csv'.format(i))

，我想将按钮更改为另一个按钮

itemNumber > 0

我了解到，由于它是静态组件，因此不会对其进行动态修改，但是我看不到如何以其他方式进行修改。

谢谢

Answer 1

您可以通过以下方式将多个参数传递给导航器：

来自调用容器/组件

TypeError: unhashable type: 'numpy.ndarray'

在被调用的容器/组件中

this.props.navigation.navigate('navigator-destination', {
     title: 'Your Title',
     label: 'Extra Params',
     callback: callback // Even callback
});

呼叫回叫：

static navigationOptions = ({navigation}) => {
        const {state} = navigation;
        label = state.params.label;
        return {
            title: `${state.params.title}`,
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
       };
  };

Answer 2

我看不到TNC的答案在headerRight内部实现了回调函数，以便重新更新我认为是问题的导航标题。

我的解决方法是：

您要观察的变量是 itemNumber ，请确保该变量位于构造函数中✅

constructor(props) {
    super(props)
    this.state = {
        dataSource : [],
        text : '',
        itemNumber : 0,
        selectedItems: []
    }
}

然后，在触发事件的函数内部，该事件需要标题的更新，添加以下代码：

triggerFunction = parameters => {
    //...
    let newValue = 1 //Implement your logic
    this.setState(({itemNumber}) => {
        this.props.navigation.setParams({itemNumber: newValue})
        return {itemNumber: newValue }
    });    
    //...
};

最后，在 navigationOption 上添加以下代码：

static navigationOptions = ({ navigation }) => {

    return{
        headerRight: 
                navigation.getParam('itemNumber', 0) > 0 
                ?  

                <Button hasText transparent onPress={() => 
                    Alert.alert(
                        "Delete User",
                        "Are you sure you want to delete this user/users? It is a non-reversible action!",
                        [
                        {text: 'Yes', onPress: () => console.log('Yes Pressed')},
                        {text: 'No', onPress: () => console.log('No Pressed'), style: 'cancel'},
                        ],

                    )
                }>
                    <Text>Delete Users</Text>
                </Button> 
                : 
                null
    };
 }

我从这个答案中得到了启发：

https://stackoverflow.com/a/51911736/5288983

我还附上了文档，您可以从中更好地了解这种方法：

https://reactnavigation.org/docs/en/headers.html#setting-the-header-title

根据一个参数修改标题

2 个答案: