Question

我正在使用React Native和React Native Modal。

我想做的是将任务详细信息（文本）输入模式，然后在HIDE模式下单击将输入的文本传递到主屏幕。

试图将文本作为状态属性进行传递-虽然不成功...

这是我的模态：

export default class List extends Component {
  constructor() {
    super();
  }
  state = {
    modalVisible: false,
    taskDetails: ''
  };
  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }    
  render() {
     const textInput = {
      backgroundColor: '#a2a2a2'
    }
    const styles = {
      display: 'flex',
      justifyContent: 'center',
      padding: 5,
      height: 50,
      width: '100%',
      backgroundColor: '#fbfbfb',
      borderColor: '#a2a2a2',
      borderWidth: 1,
      borderStyle: 'solid'
    }
return (
      <View>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
           }}
          >
          <View>
            <View>  
              <View>
                <Text>Service name</Text>
                <TextInput style={textInput} onChangeText={taskDetails => this.setState({ taskDetails })} value={this.state.taskDetails} />
              </View>
              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text>Show Modal</Text>
        </TouchableHighlight>
      </View>
    )
  }
}

Answer 1

如果您的HomeScreen是另一个屏幕，则可以通过导航道具中的setParams传递所需的数据，如here所示：

class ProfileScreen extends React.Component {
  render() {
    return (
      <Button
        onPress={() => this.props.navigation.setParams({ name: 'Lucy' })}
        title="Set title name to 'Lucy'"
      />
    );
  }
}

，然后从主屏幕上获取它：

const name = this.props.navigation.getParam('name', 'Lucy');

但是，如果HomeScreen是该组件的父级，则可以将onChangeText函数作为prop传递，然后通过setState或从那里调用其他函数。

将道具从模式传递到主屏幕

1 个答案: