Question

我有一个父屏幕，查看带有模式的交易。我想在AddTrade屏幕上按下关闭按钮时关闭此模式。硬件后退按钮已禁用，但是可以模拟硬件按钮按下吗？我想在按下Submit时关闭模式，但是两者都在不同的屏幕中。

//View Trade
render() {
    const {
      navigation,
    } = this.props;
    return (      
      <View style={{padding: 10}}>
        <View style={{flexDirection: 'row', borderWidth: 2}}>
          <View style={{flex: 1, flexDirection: 'column'}}>
            <TextInput placeholder="City" />
          </View>
          <View style={{flex: 1, flexDirection: 'column'}}>
            <TextInput placeholder="Pokemon" />
          </View>
          <Icon
            name="search"
            type="font-awesome"
            iconStyle={{
              color: '#e6f2fd',
              backgroundColor: '#2096f3',
              padding: 10,
              marginVertical: '10%',
            }}
            onPress={() => {
              console.log('search');
            }}
          />
        </View>
        {this._makeCards()}
        <TouchableOpacity
          onPress={() => {
            console.log('add');
            // this.props.navigation.navigate('Add Trades')
            this.setState({isModalVisible:!this.state.isModalVisible})
          }}
          style={{
            position: 'absolute',
            height: '10%',
            width: '20%',
            bottom: '8%',
            right: '3%',
          }}>
          <View>
            <Image source={require('../assets/images/float-add-icon.png')} />
          </View>
        </TouchableOpacity>
        <Modal visible={this.state.isModalVisible} onRequestClose={()=>{this.setState({isModalVisible:!this.state.isModalVisible})}} style={{margin:0,flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <AddTrades navigation={this.props.navigation}/>
        </Modal>
      </View>
    );
  }

//AddTrade
return (
      <View>
        <View style={[styles.app, {justifyContent: 'center'}]}>
          <Picker
            style={styles.picker}
            selectedValue={this.state.WhatTheyGive}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({WhatTheyGive: itemValue})
            }>
            {this.addPicker()}
          </Picker>
          <TextInput placeholder="Enter CP" style={styles.textInput} />
          <TextInput placeholder="Enter city" style={styles.textInput} />
          <Picker
            style={styles.picker}
            selectedValue={this.state.whatTheyWant}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({whatTheyWant: itemValue})
            }>
            {this.addPicker()}
          </Picker>
          <View style={styles.button}>
            // I want to hide modal when this is pressed.
            <Button title="Submit" onPress={this._onSubmit} />
          </View>
        </View>
      </View>
    );
  }

Answer 1

使父组件依赖于状态。即

constructor(props) {
super(props);
this.state = {
  childValue: false
} }

<View style={{backgroundColor:this.state.childValue?"red":"green"}}> //Parent View
       <TouchableOpacity onPress={() => this.setState({childValue:true)}> //ChildrenView 
<Text>Click Me</Text>
</TouchableOpacity>
    </View>

Answer 2

只需创建一个方法即可更改isModalVisible值。然后将该方法传递给您的void sort(int a[30], int n) { int m = 0,i,temp; for(i = 0;i<n-1,m==0;i++) { printf("The array when i is %d is %d",i,a[0]); for(i=1;i<n;i++) printf(",%d",a[i]); printf("\n"); if(a[i]>a[i+1]) { temp = a[i]; a[i] = a[i+1]; a[i+1] = temp; m = 1; } } if(m==0) { printf("The sorted array is %d",a[0]); for(i=1;i<n;i++) printf(",%d",a[i]); } else sort(a,n); } int main() { int a[30],n; printf("Enter the number of elements\n"); scanf("%d",&n); if(n>30||n<1) printf("The number of elements should be a natural number not exceeding 30"); else { int i; for(i=0;i<n;i++) { printf("Enter element number %d\n",i+1); scanf("%d",&a[i]); } sort(a,n); } return 0; }。

然后在子组件中按下Button时调用此回调方法。

Answer 3

您可以在此方法上使用renderProps方法。

您的Modal组件在render方法中的某个位置呈现children道具。不仅仅是渲染children道具，还可以将其作为函数children(...)调用并传递您想要的任何参数（在您的情况下，传递Modal的{{1}}函数）。

onRequestClose

然后，而不是按原样呈现// somethere in the render method: {children(props.onRequestClose)}，而是传递一个表达式，该表达式是一个包含您的<AddTrades />实例的函数（以您的AddTrades函数作为参数！）。将该函数轻松传递给您的onRequestClose（以及其他模态子对象）。

AddTrades

最后，只需在<Modal visible={this.state.isModalVisible} onRequestClose={()=>{this.setState({isModalVisible:!this.state.isModalVisible})}}> {(onRequestClose) => <AddTrades onRequestClose={onRequestClose} />} </Modal>组件中调用props.onRequestClose。

有没有一种方法可以将状态从子组件设置为父组件？

3 个答案: